jQuery实现下拉列表选择条目左右选择功能

最新推荐文章于 2021-06-03 18:45:59 发布

时间不会赖着不走

最新推荐文章于 2021-06-03 18:45:59 发布

阅读量573

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/he1234555/article/details/112725637

版权

前端专栏收录该内容

26 篇文章 1 订阅

订阅专栏

这篇博客介绍了如何使用jQuery实现一个下拉列表的选择条目在左右两个列表间移动的功能。用户可以通过按钮将选中的选项从左侧列表移动到右侧，或者从右侧移回左侧。代码中存在一个判断选中项的条件语句，但存在一些问题导致功能卡住。

摘要由CSDN通过智能技术生成

需求：实现下拉列表选择条目左右选择功能
重要的是判断是否选中
if($("#leftName option:selected"))
这行代码卡住了，这是过滤选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script  src="../../js/jquery-3.3.1.min.js"></script>
		<style>
			#leftName , #btn,#rightName{
				float: left;
				width: 100px;
				height: 300px;
			}
			#toRight,#toLeft{
				margin-top:100px ;
				margin-left:30px;
				width: 50px;
			}

			.border{
				height: 500px;
				padding: 100px;
			}
		</style>

		<script>

			//需求：实现下拉列表选择条目左右选择功能
            $(function () {
                $("#btn #toRight").click(function () {
                    if($("#leftName option:selected")) {
                        $("#rightName").append($("#leftName option:selected"))
                    }


                })

                $("#btn #toLeft").click(function () {
                    if($("#rightName option:selected")) {
                        $("#leftName").append($("#rightName option:selected"))
                    }


                })




            })


		</script>



	</head>
	<body>
		<div class="border">
			<select id="leftName" multiple="multiple">
				<option>张三</option>
				<option>李四</option>
				<option>王五</option>
				<option>赵六</option>
			</select>
			<div id="btn">
				<input type="button" id="toRight" value="-->"><br>
				<input type="button" id="toLeft" value="<--">

			</div>

			<select id="rightName" multiple="multiple">
				<option>钱七</option>
			</select>

		</div>


	</body>
</html>