jQuery实现火车票买票城市选择切换功能


Posted in jQuery onSeptember 15, 2017

效果图如下所示:

jQuery实现火车票买票城市选择切换功能

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实现火车票买票城市选择切换功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery实现frame之间互通的方法
Jun 26 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
jquery实现搜索框功能实例详解
Jul 23 jQuery
jquery实现动态改变css样式的方法分析
May 27 jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 #jQuery
jQuery plugin animsition使用小结
Sep 14 #jQuery
jquery 键盘事件的使用方法详解
Sep 13 #jQuery
React中jquery引用的实现方法
Sep 12 #jQuery
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 #jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 #jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 #jQuery
You might like
后宫无数却洁身自好的男主,唐三只爱小舞
2020/03/02 国漫
2020显卡排行榜天梯图 显卡天梯图2020年3月最新版
2020/04/02 数码科技
PHP中spl_autoload_register()和__autoload()区别分析
2014/05/10 PHP
PHP实现的mongoDB数据库操作类完整实例
2018/04/10 PHP
JavaScript与函数式编程解释
2007/04/27 Javascript
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
2010/06/18 Javascript
window.open关于浏览器拦截问题分析及解决方法
2013/02/05 Javascript
关于jquery中全局函数each使用介绍
2013/12/10 Javascript
JQuery给网页更换皮肤的方法
2015/05/30 Javascript
学习使用bootstrap3栅格系统
2016/04/12 Javascript
Bootstrap警告(Alerts)的实现方法
2017/03/22 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
2017/07/24 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
2017/09/25 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
2018/05/16 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
2018/09/04 Javascript
vue数据响应式原理知识点总结
2020/02/16 Javascript
uni-app微信小程序登录授权的实现
2020/05/22 Javascript
Vue Render函数创建DOM节点代码实例
2020/07/08 Javascript
Python模块包中__init__.py文件功能分析
2016/06/14 Python
Python MD5加密实例详解
2017/08/02 Python
python中reload(module)的用法示例详解
2017/09/15 Python
python将类似json的数据存储到MySQL中的实例
2019/07/12 Python
python之生产者消费者模型实现详解
2019/07/27 Python
python OpenCV GrabCut使用实例解析
2019/11/11 Python
Python中socket网络通信是干嘛的
2020/05/27 Python
python/golang实现循环链表的示例代码
2020/09/14 Python
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
2015/03/17 HTML / CSS
英国领先的票务代理商之一:The Ticket Factory
2019/02/09 全球购物
个人评语大全
2014/05/04 职场文书
英文求职信范文
2014/05/23 职场文书
个人遵守党的政治纪律情况对照检查材料思想汇报
2014/09/25 职场文书
证券区域经理岗位职责
2015/04/10 职场文书
检讨书之工作不认真
2019/08/14 职场文书
Android中的Launch Mode详情
2022/06/05 Java/Android
Python中requests库的用法详解
2022/06/05 Python