今天jQuery學習到appendTo()函式時，定義為在被選元素的結尾插入HTML元素，
于是利用該函式做了兩個Select下拉串列項左右選擇移動的功能，以下為完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用appendTo實作Select下拉串列項的左右移動</title>
<style type="text/css">
select {
width: 110px;
height: 95px;
}
body {
text-align: center;
}
div {
width: 130px;
display: inline-block;
}
</style>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
// 選中選項添加到右邊按鈕功能
$(":button:eq(0)").click(function () {
$("select[name='sel1'] option:selected").appendTo("select[name='sel2']");
});
// 全部選項添加到右邊按鈕功能
$(":button:eq(1)").click(function () {
$("select[name='sel1'] option").appendTo("select[name='sel2']");
});
// 選中選項添加到左邊按鈕功能
$(":button:eq(2)").click(function () {
$("select[name='sel2'] option:selected").appendTo("select[name='sel1']");
});
// 全部選項添加到左邊按鈕功能
$("button:eq(3)").click(function () {
$("select[name='sel2'] option").appendTo("select[name='sel1");
});
});
</script>
</head>
<body>
<div id="left">
<!--multiple屬性規定可同時選擇多個選項-->
<select size="5" multiple="multiple" name="sel1">
<option value="https://www.cnblogs.com/xiqingbo/archive/2021/01/30/opt1">選項一</option>
<option value="https://www.cnblogs.com/xiqingbo/archive/2021/01/30/opt2">選項二</option>
<option value="https://www.cnblogs.com/xiqingbo/archive/2021/01/30/opt3">選項三</option>
<option value="https://www.cnblogs.com/xiqingbo/archive/2021/01/30/opt4">選項四</option>
<option value="https://www.cnblogs.com/xiqingbo/archive/2021/01/30/opt5">選項五</option>
</select>
<button>選中添加到右邊</button>
<button>全部添加到右邊</button>
</div>
<div id="right">
<!--對于 windows：按住 Ctrl 按鈕來選擇多個選項
對于 Mac：按住 command 按鈕來選擇多個選項-->
<select multiple="multiple" name="sel2">
</select>
<button>選中添加到左邊</button>
<button>全部添加到左邊</button>
</div>
</body>
</html>
代碼運行效果：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/254386.html
標籤：其他
下一篇：JavaScript-作用域