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

發(fā)布時(shí)間：2021-06-24 14:43:15 來(lái)源：億速云閱讀：92 作者：小新欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)jquery如何實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)效果的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

具體內(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>

感謝各位的閱讀！關(guān)于“jquery如何實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽