经典三级联动

Posted 2021-02-05 aaronthon

html页面  如下代码放到body标签里面

        <select id="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;
      }
    }
  }

效果如下图

前后端互动，请看下篇博客。

结束！