基于jquery實現(xiàn)二級聯(lián)動效果

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
   <title>二級聯(lián)動</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>----請選擇省份----</option>
    <option>北京</option>
   <option>上海</option>
    <option>江蘇</option>
  </select>
  <select class="city">
      <option>----請選擇城市----</option>
  </select>
  <select class="city">
    <option>東城</option>
    <option>西城</option>
    <option>崇文</option>
    <option>宣武</option>
    <option>朝陽</option>
  </select> 
<select class="city">
    <option>黃浦</option>
    <option>盧灣</option>
    <option>徐匯</option>
    <option>長寧</option>
    <option>靜安</option>
  </select>
  <select class="city">
    <option>南京</option>
    <option>鎮(zhèn)江</option>
    <option>蘇州</option>
    <option>南通</option>
    <option>揚州</option>
  </select>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

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