首页 > Web开发 > 详细

jQuery 地址左右

时间:2019-07-02 09:50:16      阅读:131      评论:0      收藏:0      [点我收藏+]

app购票时选择地址用的到利用jQuery

 

style样式  可以根据自己喜欢改变

<style>
#leftName,
#btn,
#rightName {
float: left;
width: 100px;
height: 300px;
}

#toRight,
#toLeft {
margin-top: 100px;
margin-left: 30px;
width: 50px;
}

.border {
height: 500px;
padding: 100px;
}
</style>

导入js/jquery包

<script src="js/jquery-3.3.1.min.js"></script>

本文的精髓
<script type="text/javascript">
$(function() {
//向??移
$("#toRight").click(function() {
$("#rightName").append($("#leftName > option:selected"));
});
// 向??移
$("#toLeft").click(function() {
$("#rightName >option:selected").appendTo($("#leftName"));
});
});
</script>

正文

<body>
<div class="border">
<select id="leftName" multiple="multiple">
<option>北京</option>
<option>上海</option>
<option>杭州</option>
<option>东京</option>
</select>
<div id="btn">
<input type="button" id="toRight" value="-->"><br>
<input type="button" id="toLeft" value="<--">

</div>

<select id="rightName" multiple="multiple">
<option>深圳</option>
</select>

</div>
</body>

如图:

技术分享图片

然后就过来了:

技术分享图片

向左移和向右一样

 

以上  完毕

 

jQuery 地址左右

原文:https://www.cnblogs.com/mpenghao/p/11118572.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!