如何使用js完成下拉列表左右选择

最新推荐文章于 2021-08-12 17:06:13 发布

burtquan

最新推荐文章于 2021-08-12 17:06:13 发布

阅读量1.8k

点赞数 1

文章标签：遍历 javascript 函数

本文链接：https://blog.youkuaiyun.com/burtquan/article/details/52475782

版权

本文介绍了如何使用JavaScript来实现下拉列表的选择项在两个列表之间转移的效果。通过监听事件，获取下拉列表对象，遍历并判断选中项，然后将选中项添加到另一个下拉列表中，实现商品状态的更新功能。

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

在网站后台中，有2个下拉列表（一个显示已经售完的商品，一个显示已有的商品），如果已有的商品卖完缺货后，就需要放到已售完那个下拉列表中去，效果如图。

要完成这样的效果有以下几步

第一步：确定事件（单击或者双击）并绑定一个函数

第二步：分别获取两个下拉列表对象

第三步：遍历左边的下拉列表，进行判断（查看哪个被选中）

第四步：把选中的那个option添加到右边的下拉列表中去。

具体的代码实现：

<script>
     function selectOneToRight(){
         //获取左边下拉列表 
         var selectE1 = document.getElementById("select1");
         //获取右边的下拉列表
        var selectEl2 = document.getElementById("select2");
        //获取option的长度
        for(var i=len-1;i>=0;i--){
            //判断下拉列表项的状态
            if(selectE1.options[i].selected==true){
                //将选中的option添加到右边的select中去
                selectEl2.appendChild(selectEl.options[i]);
           }
       }
    }

    function selectAllToRight(){
          //获取左边下拉列表
          var selectE1 = document.getElementById("select1");
         //获取右边的下拉列表
        var selectEl2 = document.getElementById("select2");
       //获取option的长度
      var len = selectE1.options.length;
      //遍历所有的option
      for(var i=len-1;i>=0;i--){
         //将选中的option添加到右边的select中去
     }
   }
</script>

html代码的实现

<table border="1" width="600" align="center">
			<tr>
				<td>
					分类名称
				</td>
				<td>
					<input type="text" name="cname" value="手机数码"/>
				</td>
			</tr>
			<tr>
				<td>
					分类描述
				</td>
				<td>
					<textarea name="cdesc" rows="4" cols="20">手机数码类商品</textarea>
				</td>
			</tr>
			<tr>
				<td>
					分类商品
				</td>
				<td>
					<span style="float: left;">
						<font color="green" face="宋体">已有商品</font><br/>
						<select multiple="multiple" style="width: 100px;height: 200px;" id="left">
							<option>IPhone6s</option>
							<option>小米4</option>
							<option>锤子T2</option>
						</select>
						<p><a href="#" style="padding-left: 20px;" οnclick="selctOneToRight()">>></a></p>
						<p><a href="#" style="padding-left: 20px;" οnclick="selctAllToRight()">>>></a></p>
					</span>
					<span style="float: right;">
						<font color="red" face="宋体">未有商品</font><br/>
						<select multiple="multiple" style="width: 100px;height: 200px;" id="right">
							<option>三星Note3</option>
							<option>华为6s</option>
						</select>
						<p><a href="#" ><<</a></p>
						<p><a href="#" ><<<</a></p>
					</span>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<input type='submit' value="修改"/>
				</td>
			</tr>
		</table>