經典三級關聯

html頁面  如下代碼放到body标簽裡面

"province" onchange="change(this.value);" class="select-box" style="width:200px;">
            <option>請選擇一級名額</option>
        </select>

        <select id="city" onchange="countyChange(this.value);" class="select-box" style="width:200px;">
            <option>請選擇二級名額</option>
        </select>

        <select id="county" class="select-box" style="width:200px;">
            <option>請選擇三級名額</option>
        </select>      

html頁面的 scripy标簽  一定要放到head标簽裡面

<script type="text/javascript">
        var region = {
            "反洗錢":
                {
                    "": [""],
                    "黑名單": ["", "黑名單一緻性", "黑名單實時監控"],

                    "客戶風險等級": ["", "首次評估", "定期評估", "客戶風險等級唯一性", ""],

                    "可疑交易": ["", "可疑交易定性意見留痕", "可疑交易上報及時性"],
                    "法人客戶": ["", "身份要素資訊完整性"],
                    "個人客戶": ["", "身份證件有效期"]
                },
            "财務":
                {
                    "": [""],
                    "賠付差異": ["", "财務支付金額與業務金額不一緻", "核賠不通過，财務表顯示已支付成功", "财務表顯示已支付，理賠端無對應資料", "理賠業務表中未包含公估費", "财務支出時間比理賠業務表時間提前", "理賠主表中的總支付金額小于理賠業務表中的總支付金額"]

                }
        }

    </script>      

導入靜态檔案 一定要放到body标簽裡面

<script src='../static/js/threelevellinkpage.js'></script>      

靜态檔案 threelevellinkpage.js

var province = document.querySelector("#province");
  var city = document.querySelector("#city");
  var county = document.querySelector("#county");
  //二級關聯不用定義你選的省份,直接用省份(key)來決定下面的市(value)值
  var provinceName = null;

  for (ele in region){
    var op = new Option(ele , ele , false , false); //new Option("文本","值",true,true).後面兩個true分别表示預設被選中和有效
    //console.log(op);
    province.options[province.length] = op;
  }

  var change = function(src){
    city.innerHTML = "";
    if(src === '請選擇一級名額'){
      var op = new Option('請選擇二級名額' , '請選擇二級名額' , false , false);
      city.options[0] = op;
    }else{
      for (index in region[src]){
        //console.log(index);
        var op = new Option(index , index , false , false);
        city.options[city.length] = op;
      }
    }
    //記住選擇省份的值
    provinceName=src;
    countyChange(city.value)
  }

  var countyChange = function(src2){
    county.innerHTML = "";
    if(src2 === '請選擇二級名額'){
      var op = new Option('請選擇三級名額','請選擇三級名額', false , false);
      county.options[0] = op;
    }else{
      for (index in region[provinceName][src2]){
        //console.log(index);
        var op = new Option(region[provinceName][src2][index] , region[provinceName][src2][index] , false , false);
        county.options[county.length] = op;
      }
    }
  }      

效果如下圖

前後端互動，請看下篇部落格。

結束！