dom作业

最新推荐文章于 2022-11-15 23:21:14 发布

weixin_30379531

最新推荐文章于 2022-11-15 23:21:14 发布

阅读量177

点赞数

原文链接：http://www.cnblogs.com/sunzhenkun/p/7253456.html

版权

<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>

转载于:https://www.cnblogs.com/sunzhenkun/p/7253456.html

weixin_30379531

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
dom作业

<body> <select size="7" style="width: 200px;" id="slt"> <option value="123">123</option> </select><br /><br /> ...
复制链接

扫一扫