两个下拉列表框 Select 的 Option 互相移动

最新推荐文章于 2022-03-24 18:47:36 发布

原创最新推荐文章于 2022-03-24 18:47:36 发布 · 549 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#button #function

HTML 专栏收录该内容

7 篇文章

订阅专栏

这个博客展示了如何使用 JavaScript 函数实现从一个下拉列表框（Select）选择选项并将其移动到另一个下拉列表框。通过 `Add` 和 `Del` 函数，可以实现双向转移选中的选项。同时，提供了 `show` 函数来显示当前选中选项的详细信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
</head>
<script type="text/javascript">
function show(){
    Str = "";
    Ss = document.getElementById("Select_id");
    //alert(Ss.length);
    //alert( Ss.selectedIndex );
    Str += "/t"+"Obj.index"+"/t"+"Obj.value"+"/t"+"Obj.text"+"/t"+"Obj.innerText"+"/n";//标题栏
    for(i=0;i<Ss.length;i++){
        if(Ss[i].selected == true ){
            Str += "/t"+Ss[i].index+"/t"+Ss[i].value+"/t"+Ss[i].text+"/t"+Ss[i].innerText+"/n";
        }
    }
    alert(Str);
    //ItemsSelect.options[ItemsSelect.selectedIndex].value;
    //ItemsSelect.options[ItemsSelect.selectedIndex].id;
    //ItemsSelect.value;
    //ItemsSelect.options[ItemsSelect.selectedIndex].text;

}

function Add(){
    /*Add*/
    Ss = document.getElementById("Select_id");
    Ss2 = document.getElementById("Select2_id");
    // clear
    len2 = Ss2.length;
    for(i=0;i<len2;i++){
        if(Ss2[i].selected == true){
            Ss2[i].selected = false;
        }

    }
    // move
    len = Ss.length;//alert(len);
    for(i=0;i<len;i++){
        if(Ss[i].selected == true){
            //Ss2.appendChild(Ss[i]);
            Ss2.insertBefore(Ss[i],Ss2.firstChild);
            len -= 1;
            i -= 1;
        }
    }
    //alert(len);
}

function Del(){
    /*Del*/
    Ss = document.getElementById("Select_id");
    Ss2 = document.getElementById("Select2_id");
    // clear
    len = Ss.length;
    for(i=0;i<len;i++){
        if(Ss[i].selected == true){
            Ss[i].selected = false;
        }

    }
    // move
    len2 = Ss2.length;//alert(len2);
    for(i=0;i<len2;i++){
        if(Ss2[i].selected == true){
            //Ss.appendChild(Ss[i]);
            Ss.insertBefore(Ss2[i],Ss.firstChild);
            len2 -= 1;
            i -= 1;
        }
    }
    //alert(len2);
}

</script>
<body>
<table>
<tr><td>
A.<br>
<select id="Select_id" multiple="multiple" size="6" style="width: 106px; overflow: auto;" >
<option value= "0">0000000000</option>
<option value= "1">1111111111</option>
<option value= "2" title="2222222222222">2222222222222</option>
<option value= "3">3333333333</option>
<option title="000000000option value000000055" value= "4">444444444444444option value44444444444444</option>
<option value= "5">55555555</option>
<option value= "6">6666666666666</option>
<option value= "7">7777</option>
<option value= "8">8888888888</option>
<option value= "9">999999999</option>
<option value= "10">10 10 10</option>
<option value= "11">11 11 11</option>
<option value= "123">12 12 12</option>

</select>
</td><td>
<input type="button" value="Btn_show" onclick="show()" ><br>
<input type="button" value="Add >>" onclick="Add()" ><br>
<input type="button" value="<< Del" onclick="Del()" ><br>
</td><td>
B.<br>
<select id="Select2_id" multiple="multiple" size="6" style="width: 106px; overflow: auto;" >
<option value= "13">13 13 13</option>

</select>
</td>
</tr>

</body>
</html>