HTML:使用Jquery動態生成二級選項列表

時間 2019-12-11

標籤 html 使用 jquery 動態生成二級選項列表欄目 HTML 简体版

原文原文鏈接

想寫一個多級聯動的選項列表，而且我想要動態生成，可是我看了好多博客看得我暈乎乎的，就本身查了一些jq 的方法本身嘗試些了一下，下面放上我實現的效果和源代碼javascript

實現效果：html

源代碼：java

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

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

                //                這裏是監聽第一個選項列表的改變事件, 也就是當咱們選中省份中的某一項時, 第二個列表會顯示出相對應的城市名字
                $('#pp').change(function() {
                    //定義一個變量,存放選中的項是第幾項,而後減去一個1做爲二維數組的下標
                    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>