jquery城市选择案例
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
jquery城市选择案例1.代码实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-jQuery-城市选择案例</title>
<style type="text/css" media="screen">
select {
width: 200px;
background-color: teal;
height: 200px;
font-size: 20px;
}
.btn-box {
width: 30px;
display: inline-block;
vertical-align: top;
}
</style>
<script src="jquery-1.11.3.js"></script>
<script>
// $(function(){
// $("#btn-sel-none").on('click',function(){
// $("#tar-city option").appendTo('#src-city');
// });
// $("#btn-sel-all").on('click',function(){
// $("#src-city option").appendTo('#tar-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');
// });
// });
$(function(){
$("#btn-sel-all").on('click',function(){
//把所有的城市从左边移动到右边select中
$("#src-city option").appendTo("#tar-city");
});
$("#btn-sel-none").on('click',function(){
//把所有的城市从左边移动到右边select中
$("#tar-city option").appendTo("#src-city");
});
$("#btn-sel").on('click',function(){
//把所有的城市从左边移动到右边select中
$("#src-city option:selected").appendTo("#tar-city");
});
$("#btn-back").on('click',function(){
//把所有的城市从左边移动到右边select中
$("#tar-city option:selected").appendTo("#src-city");
});
});
</script>
</head>
<body>
<select id="src-city" name="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-back"> < </button>
<button id="btn-sel"> ></button>
</div>
<select id="tar-city" name="tar-city" multiple>
</select>
</body>
</html>
2.实例截图。