jQuery實現(xiàn)火車票買票城市選擇切換功能
更新時間：2017年09月15日 11:38:45 作者：XLjiqimaobuchiyu
本文通過實例代碼給大家分享了jQuery實現(xiàn)火車票買票城市選擇切換功能，非常不錯，具有參考借鑒價值，需要的朋友參考下吧
效果圖如下所示：
<!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>
總結(jié)
以上所述是小編給大家介紹的jQuery實現(xiàn)火車票買票城市選擇切換功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了詳解jQuery中的元素的屬性和相關(guān)操作,jQuery是最為流行的JavaScript庫,需要的朋友可以參考下2015-08-08
jQuery實現(xiàn)圣誕節(jié)禮物傳送（花式輪播）
本文主要對jQuery實現(xiàn)圣誕節(jié)禮物傳送的方法、思路進(jìn)行詳細(xì)介紹，具有很好的參考價值，需要的朋友一起來看下吧2016-12-12
jQuery實現(xiàn)滾動鼠標(biāo)放大縮小圖片的方法(附demo源碼下載)
這篇文章主要介紹了jQuery實現(xiàn)滾動鼠標(biāo)放大縮小圖片的方法,實例分析了jquery mousewheel插件實現(xiàn)鼠標(biāo)事件響應(yīng)及頁面元素屬性動態(tài)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-03-03
jQuery 的toggle()函數(shù)使用show()或hide()函數(shù)來切換HTML元素的可見狀態(tài)。今天我們來探討下jquery中toggle函數(shù)交替使用問題2015-06-06
jquery使用ul模擬select實現(xiàn)表單美化的方法
這篇文章主要介紹了jquery使用ul模擬select實現(xiàn)表單美化的方法,涉及jquery鼠標(biāo)事件及頁面元素樣式的相關(guān)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了jquery.form.js清空form的方法,需要的朋友可以參考下2014-03-03
基于jQuery排序及應(yīng)用實現(xiàn)Tab欄特效
這篇文章主要介紹了基于jQuery排序及應(yīng)用實現(xiàn)Tab欄特效，jquery是基于JavaScript語言寫出來的一個框架，它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設(shè)計模式，但實質(zhì)上還是js，所以JQuery也屬于網(wǎng)頁編程語言。下面更多內(nèi)容需要的小伙伴可以參考一下2022-03-03
淺析JQuery獲取和設(shè)置Select選項的常用方法總結(jié)
本篇文章是對JQuery獲取和設(shè)置Select選項的一些常用方法進(jìn)行了匯總介紹，有需要的朋友可以參考一下2013-07-07
這篇文章主要介紹了讓table變成exls的方法,需要的朋友可以參考下2014-03-03
jQuery查詢數(shù)據(jù)返回object和字符串影響原因是什么
查詢數(shù)據(jù)返回object和字符串，導(dǎo)致這兩種情況的原因是什么呢？在本文將為大家詳細(xì)介紹下，具體祥看代碼2013-08-08