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

2024-02-23 11:31:42

效果图如下所示：

<!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幻灯片特效代码分享--打开页面随机选择切换方式（3）

这篇文章主要介绍了jQuery实现幻灯片焦点图,可实现非常炫目时尚的幻灯片效果,非常具有实用价值,基本能满足你在网页上使用幻灯片(焦点图)效果,需要的朋友可以参考下幻灯片效果描述:与前两节不同的是,这款特效可以打开页面随机选择切换方式(方向) 运行效果截图如下: 具体代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <
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
jQuery模拟12306城市选择框功能简单实现方法示例

本文实例讲述了jQuery模拟12306城市选择框功能简单实现方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <title>www.jb51.net jQuery城市选择框</title> <style> #parent{ width:500px; position:relative; } #text{ height:25px; } #select{ width:420px; hei
jQuery实现企业网站横幅焦点图切换功能实例

本文实例讲述了jQuery实现企业网站横幅焦点图切换功能的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
为JQuery EasyUI 表单组件增加焦点切换功能的方法

1.背景说明在使用 JQuery EasyUI 各表单组件时,实际客户端页面元素是由 JQuery EasyUI 生成的,元素的焦点切换,虽然 Tab 键可以正常用,但顺序控制属性 tabindex 不起作用,因为页面看到的元素,是生成的,没有tabindex 属性,而真实的元素被隐藏了.本文通过一个自定义函数,实现Tab 和回车键的焦点切换功能. 2.函数定义通过捕获窗口按件,对回车和Tab键进行了热点切换处理.先根据当前焦点,获取需要tabindex 属性,加1后为下一焦点无素的属性
flutter 动手撸一个城市选择citypicker功能

城市选择器在项目开发中一般都会用到,基于flutter版本的也有一个city_pickers但是已经很久没有人维护了,项目中之前也用的是这个,最近升级到flutter1.17.x后,发现有一定的概率闪退,无奈之下,只能自动动手撸一个了 demo下载地址:https://github.com/qqcc1388/city_picker CityPickerView能够实现以下功能显示省市区地址,市或者区可以为空白数据省市区数据支持自定义,但是格式要按照city.json中个格式来,如果需要外部传
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能

本文实例讲述了微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能.分享给大家供大家参考,具体如下: 效果图实现原理采用高德地图微信小程序开发API(getWeather),如果 city 属性的值为空(或者没有city属性),默认返回定位位置的天气数据:如果 city 不为空,则返回 city 指定位置的天气数据. WXML <view class="map-weather"> <view><text>城市:</text&
jQuery实现TAB风格的全国省份城市滑动切换效果代码

本文实例讲述了jQuery实现TAB风格的全国省份城市滑动切换效果代码.分享给大家供大家参考.具体如下: 这里演示jQuery实现的全国省市菜单,加入了选项卡风格,把全国城市按字母范围归类,鼠标移到某一分类的时候,滑动门展开显示所属的全国省分和城市.特别适合于分类信息网站使用.当然,在需要选择省市的时候,也是可以用的.仔细看了下,菜单里面的城市还比较全,你不用再手动添加城市了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-tab
基于Python实现火车票抢票软件

目录导语环境准备项目思路代码展示导语每年的节假日一到,大家头疼的总时同一个问题:你买到回家的票了吗? 尤其是大型的节日:”比如国庆.春节......“ 数以亿计的人口迁移,让车票成了一年里最难买到的那张票. 跨站买票.买短途票上车补票.准点捡漏等已是老生常谈的技巧.随着互联网的发展,抢票软件成为购票热门渠道.抢票软件的到底靠谱嘛?能抢到票嘛? 近日,小编给大家就正式编写一款Python实现查票以及自动购票抢票的小程序给大家,希望大家如愿! 环境准备 1)运行环境:Python 3 .
基于jQuery的select下拉框选择触发事件实例分析

本文实例讲述了基于jQuery的select下拉框选择触发事件实现方法.分享给大家供大家参考,具体如下: 我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: <select> <option value="0" onclick="func(0)">选项一</option> <option value="1" onclick="func(1

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

相关推荐

随机推荐