Home > Article > Web Front-end > jQuery implements the city selection switching function for buying train tickets

jQuery implements the city selection switching function for buying train tickets

小云云Original: 2017-12-29 09:12:521807browse

Everyone will choose different cities when buying train tickets. This article uses example code to share with you the jQuery implementation of city selection switching function for train ticket buying. It is very good and has reference value. Friends who need it can refer to it. Hope it helps everyone.

The rendering is as follows:

<!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>
<p class="btn-box">
 <!--实体字符-->
 <button id="btn1"> >> </button>
 <button id="btn2"> << </button>
 <button id="btn3"> ></button>
 <button id="btn4"> < </button>
</p>
<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>

Related Recommended:

Detailed explanation of city selector city switching in WeChat applet development

Multi-city selector implementation code

js city selection cascade|js city selection linkage|javascript

The above is the detailed content of jQuery implements the city selection switching function for buying train tickets. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：EasyUI creates personnel tree sample codeNext article：EasyUI creates personnel tree sample code

See more

jQuery implements the city selection switching function for buying train tickets

Related articles