Eleven

這二天在試連動選單

        $(document).ready(
        function () {
            $.ajax({
                url: "testAjax.aspx", //取資料的頁面
                async: false,
                dataType: "json",//使用JSON
                success: function (date) {
                    $.each(date, function (n, value) {
                        $("#Drv1").append("<option value=" + value.cityName + ">" + value.cityName + " </option>")

                    });
                }
            });
        });
        $("#Drv1").change(
            function () {
                var selectedCityId = $.trim($("#Drv1 option:selected").val());
                $("#Drv2").empty();
                $.ajax({
                    url: "testAjax.aspx", //取資料的頁面
                    async: false,
                    dataType: "json",//使用JSON
                    success: function (date) {
                        $.each(date, function (n, value) {
                            if (value.cityName.trim() == selectedCityId.toString()) {
                                $("#Drv2").append("<option value=" + value.cityName + ">" + value.cityName + " </option>")

                            }
                        });
                    }
                });
            });

 

從ajax 取回json 再分別放入DrumdownList

另一個做法為使用plugins

http://demonstration.abgne.tw/jquery/plugins/0050/js/jquery.doubleSelect.js

        $(function () {
            // 設定連動選單的參數
            // 預設先選擇"縣市"中的"區域"
            // 允許空值選項, 顯示的內容為 "...", 值為 ""
            var options = {
                preselectFirst: 10,
                preselectSecond: 999,
                emptyOption: true,
                emptyValue: "...",
                emptyKey: ""
            };

            // 設定連動選單的選項資料
            var selectOptions = {
                "台北": {
                    "key": 10,
                    "defaultvalue": 110,
                    "values": {
                        "松山區": 110,
                        "信義區": 111,
                        "木柵區": 112,
                        "松山區": 113,
                        "信義區": 114,
                        "木柵區": 115,
                        "松山區": 116,
                        "信義區": 117,
                        "木柵區": 118
                    }
                },
                "苗栗": {
                    "key": 20,
                    "defaultvalue": 210,
                    "values": {
                        "頭份鎮": 210,
                        "竹南鎮": 211,
                        "大湖": 212,
                        "南庄": 213,
                        "後龍": 214
                    }
                },
                "新竹": {
                    "key": 30,
                    "defaultvalue": 310,
                    "values": {
                        "竹北": 310,
                        "香山": 311,
                        "竹東": 312,
                        "湖口": 999
                    }
                }
            };
            // 產生連動選單的功能
            $('#first').doubleSelect('second', selectOptions, options);
            
        });

格式不太一樣  但原理是相同的

以及下列三篇   做的練習

http://www.dotblogs.com.tw/lastsecret/archive/2010/03/30/14296.aspx

http://kevintsengtw.blogspot.tw/2012/05/jquery_29.html#.UG0Dyk3NXz0

http://kevintsengtw.blogspot.tw/2011/09/jquery-dropdownlist-2.html#.UG0V-k3NXz1

 

參考轉至於男丁大大

http://abgne.tw/jquery/jquery-plugins/jquery-doubleselect-plugin-1-2.html