當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Js选择框脚本移动操作select 标签中的 option 项的操作事项

發布時間：2025/4/5 编程问答 38 豆豆

生活随笔收集整理的這篇文章主要介紹了 Js选择框脚本移动操作select 标签中的 option 项的操作事项小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

題目：在窗體中有兩個多選列表，用戶可以從左側列表中選擇任意項，添加到右側列表中。反之亦然。如下：

在窗體中有兩個多選列表，用戶可以從左側列表中選擇任意項，添加到右側列表中。反之亦然。

此問題需用到選擇框腳本的一些關鍵屬性：

add(newOption,relOption):向控件中插入新的<option>元素，其位置在置頂項（relOption)之前，不指定relOption就添加到最后；

options:控件中所有<option>元素的集合；

remove(index):移除給定位置的選項；

selectedIndex:當前選擇項的索引，沒選時值為-1，多遠時只保存選項中的第一個索引；

selected:值為布爾值，表示選中未選中

第一次思路：

1、取得select1 中選擇的項，并把index值存入新的數組，獲得被選擇的項數。

var form1 = document.forms["form1"];var select1 = form1.elements["select1"];var select2 = form1.elements["select2"];var optArr = [];//新建空數組if(select1.options.length == 0) return false;for(i=0;i<select1.options.length;i++){if(select1.options[i].selected){optArr.push(i);//獲取選擇項的下標值，存入數組}}

2、循環第一步獲得的index數組，用selet2.appendChild(select1.options[index])，添加左邊的項到右邊；

for(i=0,var x = optArr.length;i<x;i++){select2.appendChild(select1.options[optArr[i]]); //appendChild添加文檔中的含有的元素會移除原來的元素，所以嘗試用 select2.appendChild(select1.options(index)) }

實際代碼為：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標題文檔</title> </head> <body> <p>在窗體中有兩個多選列表，用戶可以從左側列表中選擇任意項，添加到右側列表中。反之亦然。</p> <p> <form action="" method="get" id="form1"> <table width="19%" border="0" cellspacing="0" cellpadding="10"><tr><td width="13%" rowspan="2"><select name="select1" size="10" multiple="MULTIPLE" style="width:80px;"><option value="1">1列</option><option value="2">2列</option><option value="3">3列</option><option value="4">4列</option><option value="5">5列</option><option value="6">6列</option><option value="7">7列</option><option value="8">8列</option></select></td><td width="12%" height="73"><input type="button" name="Submit1" value=">>" οnclick="sel('select1','select2')" /></td><td width="75%" rowspan="2"><select name="select2" size="10" multiple="MULTIPLE" style="width:80px;"><option value="4">9列</option><option value="5">10列</option><option value="6">11列</option><option value="7">12列</option><option value="8">13列</option></select></td></tr><tr><td><input type="button" name="Submit2" value="<<" οnclick="sel('select2','select1')"/></td></tr> </table> </form> <p> </p> <script type="text/javascript"> function sel(select1,select2){//select1 為移除窗口 select2為移動到的窗口var form1 = document.forms["form1"];var select1 = form1.elements["select1"];var select2 = form1.elements["select2"];var optArr = [];//新建空數組if(select1.options.length == 0) return false;for(i=0;i<select1.options.length;i++){if(select1.options[i].selected){optArr.push(i);//獲取選擇項的下標值，存入數組}}var x = optArr.length;for(i=0;i<x;i++){select2.appendChild(select1.options[optArr[i]]); } }</script> </body> </html>

　　這種方法有個問題，就是單選的時候沒有問題，多選的時候就有問題了（移動的項和選擇的項不一樣），查了下代碼，原來appendChild移除select1的項以后，select1本身的index索引發生了變化，而循環的時候是按照原來的所以循環的，所以不對！

第二次思路：想到用add()與remove()方法

for(i=0;i<x;i++){ var selIndex = optArr[i];var newOption = document.createElement("option");newOption.value = select1[selIndex].value;newOption.text = select1[selIndex].text;select2.add(newOption);select1.options[i] = null;}

這樣其實還用到了最開始的循環，結果同第一次結果一樣，使用remove()　//select1.options[i] = null; ?同樣會改變元options的下標值，不行

第三種思路：利用selectedIndex的值來判斷，由于selectedIndex在沒有選擇項的時候值為-1，而且selectedIndex的值始終為第一項的值，所以判斷selectedIndex的值來移動刪除相關項：

function sel(select1,select2){//select1 為移除窗口 select2為移動到的窗口var select1 = form1.elements[select1];var select2 = form1.elements[select2];while(select1.selectedIndex > -1){//alert(select1.selectedIndex);var newOption = document.createElement("option"); newOption.value = select1[select1.selectedIndex].value;newOption.text = select1[select1.selectedIndex].text;select2.add(newOption);select1.remove(select1.selectedIndex);} }

全部代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標題文檔</title> </head> <body> <p>在窗體中有兩個多選列表，用戶可以從左側列表中選擇任意項，添加到右側列表中。反之亦然。</p> <p> <form action="" method="get" id="form1"> <table width="19%" border="0" cellspacing="0" cellpadding="10"><tr><td width="13%" rowspan="2"><select name="select1" size="10" multiple="MULTIPLE" style="width:80px;"><option value="1">1列</option><option value="2">2列</option><option value="3">3列</option><option value="4">4列</option><option value="5">5列</option><option value="6">6列</option><option value="7">7列</option><option value="8">8列</option></select></td><td width="12%" height="73"><input type="button" name="Submit1" value=">>" οnclick="sel('select1','select2')" /></td><td width="75%" rowspan="2"><select name="select2" size="10" multiple="MULTIPLE" style="width:80px;"><option value="4">9列</option><option value="5">10列</option><option value="6">11列</option><option value="7">12列</option><option value="8">13列</option></select></td></tr><tr><td><input type="button" name="Submit2" value="<<" οnclick="sel('select2','select1')"/></td></tr> </table> </form> <p> </p> <script type="text/javascript">function sel(select1,select2){//select1 為移除窗口 select2為移動到的窗口var select1 = form1.elements[select1];var select2 = form1.elements[select2];while(select1.selectedIndex > -1){//alert(select1.selectedIndex);var newOption = document.createElement("option"); newOption.value = select1[select1.selectedIndex].value;newOption.text = select1[select1.selectedIndex].text;select2.add(newOption);select1.remove(select1.selectedIndex);} }</script> </body> </html>

　此時左右移動可以正常執行，如果你還有其它方法請留言，感激不近！

轉載于:https://www.cnblogs.com/NNUF/archive/2011/12/31/2308782.html

總結

以上是生活随笔為你收集整理的Js选择框脚本移动操作select 标签中的 option 项的操作事项的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：阳光城是国企吗
下一篇： Oracle 管道化表函数(Pipeli

编程问答

Js选择框脚本 移动操作select 标签中的 option 项的操作事项

總結

Js选择框脚本移动操作select 标签中的 option 项的操作事项