您的位置：首页 > Web前端 > JQuery

jquery实现仿火车官网城市选择切换案例

2017-09-14 23:46 513 查看

jquery实现仿火车官网城市选择切换案例

<!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>

<option value="1">成都</option>

<option value="2">泸州</option>

<option value="3">攀枝花</option>

<option value="4">眉山</option>

<option value="5">北京</option>

<option value="6">上海</option>

<option value="7">广州</option>

<option value="8">福州</option>

</select>

<div class="btn-box">



<button id="btn1"> >> </button>

<button id="btn2"> << </button>

<button id="btn3"> ></button>

<button id="btn4"> < </button>

</div>

<select id="tar-city" name="tar-city" multiple>

</select>

<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>

<script>
$(function(){
$("#btn1").click(function(){
$("#src-city>option").appendTo("#tar-city");
});
$("#btn2").click(function(){
$("#tar-city>option").appendTo("#src-city");
});
$("#btn3").click(function(){
$("#src-city>option:selected").appendTo("#tar-city");
});
$("#btn4").click(function(){
$("#tar-city>option:selected").appendTo("#src-city");
});
});

</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery 仿火车官网城市切换

相关文章推荐

新的分享

章节导航