快捷導(dǎo)航

如何使用Jquery動(dòng)態(tài)生成二級(jí)選項(xiàng)列表

更新時(shí)間：2020年02月06日 11:14:55 作者：西紅柿里沒有番茄

這篇文章主要介紹了如何使用Jquery動(dòng)態(tài)生成二級(jí)選項(xiàng)列表,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

想寫一個(gè)多級(jí)聯(lián)動(dòng)的選項(xiàng)列表，并且我想要?jiǎng)討B(tài)生成，但是我看了好多博客看得我暈乎乎的，就自己查了一些jq 的方法自己嘗試些了一下，下面放上我實(shí)現(xiàn)的效果和源代碼

實(shí)現(xiàn)效果：

源代碼：

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>

    <!--引入jquery框架-->
    <script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">
      //      在函數(shù)中添加選項(xiàng)列表聯(lián)動(dòng)的事件
      $(function() {
        //        定義兩個(gè)數(shù)組,既然是二級(jí)聯(lián)動(dòng)的列表,那么第二個(gè)列表肯定就是二維的了,也就是下面的city數(shù)組
        var pro = ['省份一', '省份二', '省份三'];
        var city = [
          ['1', '2', '3'],
          ['4', '5'],
          ['6']
        ];

        //使用一個(gè)for循環(huán)設(shè)置好省份的選項(xiàng)列表,這一步比較簡(jiǎn)單,邏輯也比較清晰
        //        append():添加選項(xiàng)
        //        val():返回當(dāng)前選項(xiàng)值
        //        html():給返回的當(dāng)前選項(xiàng)添加內(nèi)容
        for(var i = 0; i < pro.length; i++) {
          $("#pp").append($("<option></option>").val(i + 1).html(pro[i]));
        }

        //        這里是監(jiān)聽第一個(gè)選項(xiàng)列表的改變事件, 也就是當(dāng)我們選中省份中的某一項(xiàng)時(shí), 第二個(gè)列表會(huì)顯示出相對(duì)應(yīng)的城市名字
        $('#pp').change(function() {
          //定義一個(gè)變量,存放選中的項(xiàng)是第幾項(xiàng),然后減去一個(gè)1作為二維數(shù)組的下標(biāo)
          var index = $(this).val() - 1;
//          設(shè)置屬性值
          $("#cc").prop("length", 1);

          for(var i = 0; i < city[index].length; i++) {
            $("#cc").append($("<option></option>").val(i + 1).html(city[index][i]));

          }

        })

      })
    </script>

  </head>

  <body>

    <!--先在body中定義好連個(gè)下拉列表-->
    <select id="pp">
      <option selected="selected">請(qǐng)選擇</option>

    </select>

    <select id="cc">
      <option selected="selected">請(qǐng)選擇</option>

    </select>

  </body>

</html>

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

您可能感興趣的文章: