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