<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jquery08城市选择案例</title>
<style>
select {
width: 200px;
height: 200px;
font-size: 20px;
background-color: teal;
}
.btn-box{
width: 30px;
display: inline-block;
vertical-align: top;
}
</style>
<script src="jquery-1.11.1.min.js"></script>
<script>
$(function () {
$("#btn-sel-all").on("click", function () {
$("#src-city option").appendTo("#tar-city");
});
$("#btn-sel-none").on("click", function () {
$("#tar-city option").appendTo("#src-city");
});
$("#btn-sel").on("click", function () {
$("#src-city option:selected").appendTo("#tar-city");
});
$("#btn-back").on("click", function () {
$("#tar-city option:selected").appendTo("#src-city");
});
});
</script>
</head>
<body>
<select name="src-city" id="src-city" 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="btn-sel-all">>></button>
<button id="btn-sel-none"><<</button>
<button id="btn-sel">></button>
<button id="btn-back"><</button>
</div>
<select name="tar-city" id="tar-city" multiple>
</select>
</body>
</html>
jquery03-08城市选择案例
最新推荐文章于 2018-12-11 20:04:00 发布