dom作业 

<body>
        <select size="7" style="width: 200px;" id="slt">
            <option value="123">123</option>
        </select><br /><br />
        <input type="text" id="txt"/>
        <input type="button" value="添 加" id="btn"/>
    </body>
</html>
<script>
    var txt = document.getElementById('txt');
    var slt = document.getElementById('slt');
    
    document.getElementById('btn').onclick = function(){
        var opt = document.createElement('option');
        //opt.value = txt.value;
        opt.innerText = txt.value;
        slt.appendChild(opt);
        
        txt.value = '';
    }
</script>

要注意最后的txt.value=‘ ’。提高用户体验。

两个text表格属性相互移动的问题。

<body>
        <select id="left_slt" size="7" multiple="multiple" style="width: 150px;">
            <option>ABC</option>
            <option>123</option>
            <option>xyz</option>
            <option>IJK</option>
        </select>
            <input type="button" id="to_right" value="向右" />
            <input type="button" id="to_left" value="向左" />
            <select id="right_slt" size="7" style="width: 150px;">            
        </select>
    </body>
</html>
<script>
    var left_slt=document.getElementById('left_slt');
    var left_right=document.getElementById('left_right');
    
    document.getElementById('to_right').onclick=function(){
        right_slt.appendChild(left_slt.options[left_slt.selectedIndex]);
        
    }
    document.getElementById('to_left').onclick=function(){
        left_slt.appendChild(right_slt.options[right_slt.selectedIndex]);
        
    }
</script>

 

posted @ 2017-07-29 08:39  壹路桐行丨  阅读(151)  评论(0)  编辑  收藏  举报