html jquery select 三級菜單

時間 2019-11-12

原文原文鏈接

經過讀取json數據完成無刷新加載php

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>getJSON獲取數據</title>
    <script src="../../bootstrap_test/bootstrap/js/jquery.min.js"></script>
    <style type="text/css">
        *{margin:0;padding:0;}
        .selectList{width:300px;margin:50px auto;}
    </style>
</head>

<body>
<div class="selectList">
    <select class="province">
        <option>請選擇</option>
    </select>
    <select class="city">
        <option>請選擇</option>
    </select>
    <select class="district">
        <option>請選擇</option>
    </select>
</div>
<script>
    $(function(){
        var areaJson;
        var func = {
            "province": function(areaJson) {
                temp_html = "";
                $.each(areaJson,function(i,province){
                    temp_html+="<option value='"+province.p+"'>"+province.p+"</option>";
                });
                $(".province").html(temp_html);
                func.city(areaJson);
            },
            "city": function(areaJson) {
                var n = $(".province").get(0).selectedIndex,
                        temp_html="";
                $.each(areaJson[n].c, function(i, city) {
                    temp_html+="<option value='"+city.ct+"'>"+city.ct+"</option>";
                });
                $(".city").html(temp_html);
                func.district(areaJson);
            },
            "district": function(areaJson) {
                var m = $(".province").get(0).selectedIndex,
                     n = $(".city").get(0).selectedIndex,
                        temp_html="";
                if(typeof(areaJson[m].c[n].d) == "undefined") {
                    $(".district").css("display", "none");
                }
                else
                {
                    $(".district").css("display","inline");
                    $.each(areaJson[m].c[n].d, function (i, district) {
                        temp_html += "<option value='" + district.dt + "'>" + district.dt + "</option>";
                    });
                    $(".district").html(temp_html);
                }
            }
        };
        //獲取json數據
        $.getJSON("./area.json",function(data){
            areaJson = data;
            //爲省份賦值
            func.province(data);
        });

        $(".province").change(function(){
            func.city(areaJson);
        });
        $(".city").change(function(){
            func.district(areaJson);
        });
    })
</script>
</body>
</html>

　　area.jsoncss

[
  {
    "p": "江西省",
    "c": [
      {
        "ct": "南昌市",
        "d": [
          {
            "dt": "西湖區"
          },
          {
            "dt": "東湖區"
          },
          {
            "dt": "高新區"
          }
        ]
      },
      {
        "ct": "贛州市",
        "d": [
          {
            "dt": "瑞金縣"
          },
          {
            "dt": "南豐縣"
          },
          {
            "dt": "全南縣"
          }
        ]
      }
    ]
  },
  {
    "p": "北京",
    "c": [
      {
        "ct": "東城區"
      },
      {
        "ct": "西城區"
      }
    ]
  },
  {
    "p": "河北省",
    "c": [
      {
        "ct": "石家莊",
        "d": [
          {
            "dt": "長安區"
          },
          {
            "dt": "橋東區"
          },
          {
            "dt": "橋西區"
          }
        ]
      },
      {
        "ct": "唐山市",
        "d": [
          {
            "dt": "灤南縣"
          },
          {
            "dt": "樂亭縣"
          },
          {
            "dt": "遷西縣"
          }
        ]
      }
    ]
  }
]

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。