jQuery中的select多、单选菜单
2022-03-13 本文已影响0人
马佳乐
对<select></select> 标签使用appendTo()方法，进行多个选项或单个选项的转移。
<select></select> 标签的multiple属性可同时选择多个选项。
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
select {
width: 200px;
background-color: teal;
height: 200px;
font-size: 20px;
}
.btn-box {
width: 30px;
display: inline-block;
vertical-align: top;
}
</style>
</head>
<body>
<h1>城市选择：</h1>
<select id="src-city" name="src-city" multiple><!--multiple可同时选择多个选项-->
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
<option value="4">广州</option>
<option value="5">河南</option>
</select>
<div class="btn-box">
<!--实体字符-->
<button id="allRight"> >> </button>
<button id="allLeft"> << </button>
<button id="selRight"> ></button>
<button id="selLeft"> < </button>
</div>
<select id="tar-city" name="tar-city" multiple>
</select>
<script src="js/jquery.js"></script>
<script>
$(function() {
//全到右边
$("#allRight").click(function() {
//找到左边select下拉菜单的所有option项,把这些option项都添加到右边的select下拉菜单中
$("#src-city>option").appendTo("#tar-city");
});
//全到左边
$("#allLeft").click(function() {
//找到右边select下拉菜单中的所有option项,把这些option项都添加到左边的select下拉菜单中
$("#src-city").append($("#tar-city>option"));
});
//选中的到右边
$("#selRight").click(function() {
//找到左边select下拉菜单中,被选中的option项，把这些option项添加到右边的select下拉菜单中
$("#src-city>option:selected").appendTo("#tar-city");
});
//选中的到左边
$("#selLeft").click(function() {
//找到右边select下拉菜单中,被选中的option项,把这些option项添加到左边的select下拉菜单中
$("#src-city").append($("#tar-city>option:selected"));
});
});
</script>
</body>
</html>
