首頁 > web前端 > js教程 > jQuery實現買火車票城市選擇切換功能

jQuery實現買火車票城市選擇切換功能

小云云
發布: 2017-12-29 09:12:52
原創
1949 人瀏覽過

大家在買火車票的時候都會選擇不同的城市,本文透過實例代碼給大家分享了jQuery實現火車票買票城市選擇切換功能,非常不錯,具有參考借鑒價值,需要的朋友參考下吧,希望能幫助大家。

效果圖如下:



#

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

<!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>

登入後複製

相關推薦:

詳解微信小程式開發之城市選擇器城市切換

多城市選擇器實作程式碼

js城市選擇級聯|js城市選擇連動|javascript

#

以上是jQuery實現買火車票城市選擇切換功能的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
引入jQuery 文件
來自於 1970-01-01 08:00:00
0
0
0
jquery筆記哪裡有下?
來自於 1970-01-01 08:00:00
0
0
0
javascript - vue+webpack怎麼引入jquery
來自於 1970-01-01 08:00:00
0
0
0
php+jquery的問題
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板