在本篇內容中小編給各位分享的是關於如何使用JS控制下拉列表左右選擇的實例代碼,需要的朋友們可以參考下。
使用JS控制下拉列表左右選擇
需求分析
在我們的分類管理中,我們要能夠去修改我們的分類信息,當我們一點修改的時候,跳轉到一個可以編輯的頁面,這裡面能夠修改分類的名稱,分類的描述,以及分類的商品
技術分析
ondblclick="selectOne()":雙擊事件
select標籤的屬性multiple="multiple":
代碼實現
<meta charset="UTF-8"/>
<title></title><!-- 步驟分析 1. 確定事件: 點擊事件 :onclick事件 2. 事件要觸發函數 selectOne 3. selectOne要做一些操作 (將左邊選中的元素移動到右邊的select中) 1. 獲取左邊Select中被選中的元素 2. 將選中的元素添加到右邊的Select中就可以 --><script>function selectOne(){ //1. 獲取左邊Select中被選中的元素 var leftSelect = document.getElementById("leftSelect"); var options = leftSelect.options; //找到右側的Select var rightSelect = document.getElementById("rightSelect"); //遍歷找出被選中的option for(var i=0; i < options.length; i++){ var option1 = options[i]; if(option1.selected){ //2. 將選中的元素添加到右邊的Select中就可以 rightSelect.appendChild(option1); } } } //將左邊所有的商品移動到右邊 function selectAll(){ //1. 獲取左邊Select中被選中的元素 var leftSelect = document.getElementById("leftSelect"); var options = leftSelect.options; //找到右側的Select var rightSelect = document.getElementById("rightSelect"); //遍歷找出被選中的option for(var i=options.length - 1; i >=0; i--){ var option1 = options[i]; rightSelect.appendChild(option1); } }</script>
<table border="1px" width="400px">
<tbody>
<tr class="firstRow">
<td>
分類名稱
</td>
<td>
<input type="text" value="手機數碼"/>
</td>
</tr>
<tr>
<td>
分類描述
</td>
<td>
<input type="text" value="這裡面都是手機數碼"/>
</td>
</tr>
<tr>
<td>
分類商品
</td>
<td>
<!--左邊-->
<p>
已有商品<br/> <select multiple="multiple" id="leftSelect" ondblclick="selectOne()"><option>
華為
</option>
<option>
小米
</option>
<option>
錘子
</option>
<option>
oppo
</option></select><br/> <a href="#" rel="external nofollow" onclick="selectOne()"> >> </a> <br/> <a href="#" rel="external nofollow" onclick="selectAll()"> >>> </a>
</p><!--右邊-->
<p>
未有商品<br/> <select multiple="multiple" id="rightSelect"><option>
蘋果6
</option>
<option>
腎7
</option>
<option>
諾基亞
</option>
<option>
波導
</option></select><br/> <a href="#" rel="external nofollow"> << </a> <br/> <a href="#" rel="external nofollow"> <<< </a>
</p>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交"/>
</td>
</tr>
</tbody>
</table>
<p>
<br/>實例補充:<br/>
</p>
<title>
JavaScript下拉列表左右選擇
</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/><script type="text/javascript">function chooseToRight() { var op=document.getElementById("s1").getElementsByTagName("option"); var select2=document.getElementById("s2"); var k=op.length; for(var i=0;i<k;i++) { if(op[i].selected==true) { select2.appendChild(op[i]); k--;i--; //這裡要特別注意!!!因為appendChild相當於剪切,所以每次循環之後要執行k--,i-- } } } function chooseToLeft() { var op=document.getElementById("s2").getElementsByTagName("option"); var select2=document.getElementById("s1"); var k=op.length; for(var i=0;i<k;i++) { if(op[i].selected==true) { select2.appendChild(op[i]); k--;i--; } } } function allToLeft() { var op=document.getElementById("s2").getElementsByTagName("option"); var select2=document.getElementById("s1"); var k=op.length; for(var i=0;i<k;i++) { select2.appendChild(op[i]); k--;i--; } } function allToRight() { var op=document.getElementById("s1").getElementsByTagName("option"); var select2=document.getElementById("s2"); var k=op.length; for(var i=0;i<k;i++) { select2.appendChild(op[i]); k--;i--; } } </script>
<p>
<select id="s1" multiple="multiple" style="width: 120px;height: 150px"><option>
AAAAAAA
</option>
<option>
BBBBBBB
</option>
<option>
CCCCCCC
</option>
<option>
DDDDDDD
</option>
<option>
EEEEEEE
</option></select><br/><br/> <input type="button" value="選中添加到右邊" onclick="chooseToRight();"/><br/><br/> <input type="button" value="全部添加到右邊" onclick="allToRight();"/><br/>
</p>
<p>
<select id="s2" multiple="multiple" style="width: 120px;height: 150px"><option>
1111111
</option>
<option>
2222222
</option>
<option>
3333333
</option>
<option>
4444444
</option>
<option>
5555555
</option></select><br/><br/> <input type="button" value="選中添加到左邊" onclick="chooseToLeft();"/><br/><br/> <input type="button" value="全部添加到左邊" onclick="allToLeft();"/><br/>
[月球人 ] JS控制下拉列表左右選擇實例代碼已經有275次圍觀