利用js来控制下拉列表左右选择

在我们的分类管理中,我们要能够去修改我们的分类信息,当我们点击修改的时候,可以跳转到一个能编辑的页面,这里面能够修改分类的名称、分类的描述、以及分类的商品。

技术分析

ondblclick="selectOne()"//双击事件

multiple="multiple"//select标签的属性

代码实现:

<!DOCTYPE html><html>

<head>

<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>

</head>

<body>

<table border="1px" width="400px">

<tr>

<td>分类名称</td>

<td><input type="text" value="手机数码"/></td>

</tr>

<tr>

<td>分类描述</td>

<td><input type="text" value="这里面都是手机数码"/></td>

</tr>

<tr>

<td>分类商品</td>

<td>

<!--左边-->

<div style="float: left;">

已有商品<br />

<select multiple="multiple" id="leftSelect" ondblclick="selectOne()">

<option>华为</option>

<option>小米</option>

<option>锤子</option>

<option>oppo</option>

</select>

<br />

<a href="#" onclick="selectOne()"> &gt;&gt; </a> <br />

<a href="#" onclick="selectAll()"> &gt;&gt;&gt; </a>

</div>

<!--右边-->

<div style="float: right;">

未有商品<br />

<select multiple="multiple" id="rightSelect">

<option>苹果6</option>

<option>肾7</option>

<option>诺基亚</option>

<option>波导</option>

</select>

<br />

<a href="#"> &lt;&lt; </a> <br />

<a href="#"> &lt;&lt;&lt; </a>

</div>

</td>

</tr>

<tr>

<td colspan="2">

<input type="submit" value="提交"/>

</td>

</tr>

</table>

</body></html>

以上就是如何利用js来控制下拉列表左右选择的详细内容,更多请关注网站的其它相关文章!