快捷導(dǎo)航

基于jquery實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)效果

更新時(shí)間：2017年03月30日 09:31:03 作者：Marven

這篇文章主要為大家詳細(xì)介紹了基于jquery二級(jí)聯(lián)動(dòng)效果的代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了jquery實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)的具體代碼，供大家參考，具體內(nèi)容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
   <title>二級(jí)聯(lián)動(dòng)</title>
   <script src="http://apps.bdimg.com/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("#province").change(function(){
       $("#province option").each(function(i,o){
          if($(this).attr("selected"))
          {
           $(".city").hide();
           $(".city").eq(i).show();
         }
       });
      });
    $("#province").change();
   });
</script>
</head>
<body>
   <select id="province">
    <option>----請(qǐng)選擇省份----</option>
    <option>北京</option>
   <option>上海</option>
    <option>江蘇</option>
  </select>
  <select class="city">
      <option>----請(qǐng)選擇城市----</option>
  </select>
  <select class="city">
    <option>東城</option>
    <option>西城</option>
    <option>崇文</option>
    <option>宣武</option>
    <option>朝陽(yáng)</option>
  </select> 
<select class="city">
    <option>黃浦</option>
    <option>盧灣</option>
    <option>徐匯</option>
    <option>長(zhǎng)寧</option>
    <option>靜安</option>
  </select>
  <select class="city">
    <option>南京</option>
    <option>鎮(zhèn)江</option>
    <option>蘇州</option>
    <option>南通</option>
    <option>揚(yáng)州</option>
  </select>
</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

asp.net+jquery.form實(shí)現(xiàn)圖片異步上傳的方法(附j(luò)query.form.js下載)
這篇文章主要介紹了asp.net+jquery.form實(shí)現(xiàn)圖片異步上傳的方法,結(jié)合實(shí)例形式分析了jquery.form.js前臺(tái)異步提交圖片與asp.net后臺(tái)處理的相關(guān)技巧,需要的朋友可以參考下
2016-05-05
jquery 將當(dāng)前時(shí)間轉(zhuǎn)換成yyyymmdd格式的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇jquery 將當(dāng)前時(shí)間轉(zhuǎn)換成yyyymmdd格式的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考
2016-06-06
JQuery使用屬性addClass、removeClass和toggleClass實(shí)現(xiàn)增加和刪除類(lèi)操作示例
這篇文章主要介紹了JQuery使用屬性addClass、removeClass和toggleClass實(shí)現(xiàn)增加和刪除類(lèi)操作,涉及jquery事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)使用技巧,需要的朋友可以參考下
2019-11-11
jQuery操作select下拉框的text值和value值的方法
這篇文章主要介紹了jQuery操作select下拉框的text值和value值的方法,需要的朋友可以參考下
2014-05-05
jquery 查找select ,并觸發(fā)事件的實(shí)現(xiàn)代碼
項(xiàng)目中,用jquery 查找select ,并觸發(fā)事件. 記一筆.關(guān)鍵代碼，需要的朋友可以參考下。
2011-03-03
EasyUI學(xué)習(xí)之Combobox下拉列表(1)
這篇文章主要為大家詳細(xì)介紹了EasyUI學(xué)習(xí)之Combobox下拉列表的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
jQuery News Ticker 基于jQuery的即時(shí)新聞行情展示插件
今天分享一個(gè)新聞行情的jQUery插件，可以幫助大家使用比較小的頁(yè)面區(qū)域來(lái)展示最新最重要的信息。
2011-11-11
jQuery實(shí)現(xiàn)的購(gòu)物車(chē)物品數(shù)量加減功能代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的購(gòu)物車(chē)物品數(shù)量加減功能,涉及jQuery針對(duì)鼠標(biāo)事件的響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下
2016-11-11
jQuery實(shí)現(xiàn)分頁(yè)功能（含ajax請(qǐng)求、后臺(tái)數(shù)據(jù)、附完整demo）
這篇文章主要給大家介紹了關(guān)于jQuery實(shí)現(xiàn)分頁(yè)功能的相關(guān)資料，主要包含ajax請(qǐng)求和后臺(tái)數(shù)據(jù)，文末給出了完整的demo示例，對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。
2017-04-04
Easyui筆記2：實(shí)現(xiàn)datagrid多行刪除的示例代碼
本篇文章主要介紹了Easyui筆記2：實(shí)現(xiàn)datagrid多行刪除，詳細(xì)介紹了完成一個(gè)多行勾選并刪除的功能。有興趣的可以了解一下。
2017-01-01