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 相关文章推荐
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
jquery网页加载进度条的实现
Jun 01 jQuery
简单实现jQuery轮播效果
Aug 18 jQuery
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
JQuery扩展对象方法操作示例
Aug 21 jQuery
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
jQuery实现简单日历效果
Jul 05 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
yii上传文件或图片实例
2014/04/01 PHP
yii实现创建验证码实例解析
2014/07/31 PHP
PHP 绘制网站登录首页图片验证码
2016/04/12 PHP
session 加入redis的实现代码
2016/07/15 PHP
CakePHP框架Session设置方法分析
2017/02/23 PHP
在javascript将NodeList作为Array数组处理的方法
2010/07/09 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
2011/01/01 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
2011/08/02 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
2013/09/29 Javascript
JS中的this变量的使用介绍
2013/10/21 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
2014/01/02 Javascript
在JavaScript的正则表达式中使用exec()方法
2015/06/16 Javascript
laypage分页控件使用实例详解
2016/05/19 Javascript
JavaScript操作表单实例讲解(上)
2016/06/20 Javascript
打造通用的匀速运动框架(实例讲解)
2017/10/17 Javascript
原生实现一个react-redux的代码示例
2018/06/08 Javascript
bootstrap下拉框动态赋值方法
2018/08/10 Javascript
JQuery通过后台获取数据遍历到前台的方法
2018/08/13 jQuery
实例讲解vue源码架构
2019/01/24 Javascript
搭建一个Koa后端项目脚手架的方法步骤
2019/05/30 Javascript
通过实践编写优雅的JavaScript代码
2019/05/30 Javascript
JavaScript Canvas编写炫彩的网页时钟
2019/10/16 Javascript
JS如何生成动态列表
2020/09/22 Javascript
[01:49]一目了然!DOTA2DotA快捷操作对比第二弹
2014/05/16 DOTA
[01:15:29]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第三局
2016/03/04 DOTA
Django中的CBV和FBV示例介绍
2018/02/25 Python
python selenium 执行完毕关闭chromedriver进程示例
2019/11/15 Python
html5 跨文档消息传输示例探讨
2013/04/01 HTML / CSS
印度尼西亚最大和最全面的网络商城:Blibli.com
2017/10/04 全球购物
优纳科技软件测试面试题
2012/05/15 面试题
《在家里》教后反思
2014/03/01 职场文书
建筑投标担保书
2014/05/20 职场文书
运动会表扬稿范文
2015/05/05 职场文书
横空出世观后感
2015/06/09 职场文书
2015年第31个教师节致辞
2015/07/31 职场文书
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL