如何使用Jquery動態(tài)生成二級選項列表

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

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

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

實現(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ù)中添加選項列表聯(lián)動的事件
      $(function() {
        //        定義兩個數(shù)組,既然是二級聯(lián)動的列表,那么第二個列表肯定就是二維的了,也就是下面的city數(shù)組
        var pro = ['省份一', '省份二', '省份三'];
        var city = [
          ['1', '2', '3'],
          ['4', '5'],
          ['6']
        ];

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

        //        這里是監(jiān)聽第一個選項列表的改變事件, 也就是當我們選中省份中的某一項時, 第二個列表會顯示出相對應的城市名字
        $('#pp').change(function() {
          //定義一個變量,存放選中的項是第幾項,然后減去一個1作為二維數(shù)組的下標
          var index = $(this).val() - 1;
//          設置屬性值
          $("#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中定義好連個下拉列表-->
    <select id="pp">
      <option selected="selected">請選擇</option>

    </select>

    <select id="cc">
      <option selected="selected">請選擇</option>

    </select>

  </body>

</html>

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

您可能感興趣的文章: