select 左右选择(js)

最新推荐文章于 2021-06-04 22:23:40 发布

那微笑丶是阳光

最新推荐文章于 2021-06-04 22:23:40 发布

阅读量758

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/printxfh/article/details/79989454

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Select左右选择!!!(改样式后可以直接用)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>select左右选择</title>
    <style type="text/css">
        .select_margin {margin-left:4px;float:left;}
        .input_margin {margin-left:4px;margin-top:20px;float:left;}
        .select_win {padding: 0 0 0 2px; height: 200px;width: 166px;}
    </style>
</head>
<body>
<span class="select_margin" style="margin-left:50px;">
    <div class="tdlabel_net">选择列表</div>
    <div>
        <select class="select_win" name="addName" id="addName" multiple="" ondblclick="javascript:addSel(addName,delName,3);">
            <option value="aaa">aaa</option>
            <option value="bbb">bbb</option>
            <option value="ccc">ccc</option>
            <option value="ddd">ddd</option>
        </select>
    </div>
</span>
<span class="input_margin">
    <input type="button" onClick="javascript:addSel(addName,delName,3);" value=" > " ><br><br>
    <input type="button" onClick="javascript:delSel(addName,delName);" value=" x " >
</span>
<span class="select_margin">
    <div class="tdlabel_net">已经选择</div>
    <div>
        <select class="select_win" name="delName" id="delName" multiple="" ondblclick="javascript:delSel(addName,delName);"></select>
    </div>
</span> 
</body>
</html>
<script type="text/javascript">
function addSel(srcAddrSel,srcSelected,maxMember){
    var len=srcSelected.length;
    for(var i=0;i<srcAddrSel.length;i++){
        if((srcAddrSel.options[i]!=null)&&(srcAddrSel.options[i].selected)){
            if(len>=maxMember){
                alert("已选择的成员不能超过"+maxMember+"个!");
                break;
          }
          srcSelected.options[len]=new Option(srcAddrSel.options[i].value);
          srcSelected.options[len].value=srcAddrSel.options[i].value;
          srcSelected.options[len].text=srcAddrSel.options[i].text;
          srcSelected.options[len].selected=true;
          srcAddrSel.remove(i);
          len++;
          i=i-1
        }
    }
}
function delSel(srcAddrSel,srcSelected){
    console.log(srcAddrSel);
    var len=srcSelected.options.length;
    var length=srcAddrSel.options.length;
    for(var i=0;i<len;i++){
        if((srcSelected.options[i]!=null)&&(srcSelected.options[i].selected==true)){
            srcAddrSel.options[length]=new Option(srcSelected.options[i].value);
            srcAddrSel.options[length].value=srcSelected.options[i].value;
            srcAddrSel.options[length].text=srcSelected.options[i].text;length++
        }
    }
    for(var i=(len-1);i>=0;i--){
        if((srcSelected.options[i]!=null)&&(srcSelected.options[i].selected)){
          srcSelected.options[i]=null;
        }
    }
}   
</script>

那微笑丶是阳光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
select 左右选择(js)

Select左右选择!!!(改样式后可以直接用)&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;select左右选择&lt;/title&gt; &lt;style type="
复制链接

扫一扫