JS-Select

Driven_Pluto

于 2021-02-03 17:10:09 发布

阅读量112

点赞数

分类专栏： Java-web

本文链接：https://blog.csdn.net/qq_42295268/article/details/113615155

版权

Java-web 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        select{width:100px;height:200px;border:1px solid #ddd;float:left;}
        div{width:100px;height:200px;float:left;text-align:center;padding-top:50px;}
    </style>
</head>
<body>
<h1>JavaScript语言中HTML DOM 操作-select对象</h1>
<select id="sid1" size="10" multiple>
    <option value="0">邓丽君</option>
    <option value="1">张国荣</option>
    <option value="2">梅艳芳</option>
    <option value="3">黄家驹</option>
    <option value="4">迈克尔.杰克逊</option>
    <option value="5">姚贝娜</option>
    <option value="6">张雨生</option>
</select>
<div>
    <button onclick="doMove('sid1','sid2')">>></button>
    <br/><br/><br/><br/>
    <button onclick="doMove('sid2','sid1')"><<</button>
</div>
<select id="sid2" size="10" multiple></select>
</body>
<script>
    function doMove(d1,d2) {
        var select1 = document.getElementById(d1);
        var select2 = document.getElementById(d2);
        //获取所有选项
        var list = select1.options;
        //遍历
        for(var i = 0;i<list.length;i++){
            console.log(i);
            //判断选中
            if(list[i].selected){
                list[i].selected = false;
                var ob = list[i];
                select1.remove(i);
                select2.add(ob);
                i--;
            }
        }
    }
</script>
</html>

在这里插入图片描述

Driven_Pluto

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS-Select

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> select{width:100px;height:200px;border:1px solid #ddd;float:left;} div{width:100px;height:200p
复制链接

扫一扫