经典三级联动

经典三级联动

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

        <select id="province" οnchange="change(this.value);" class="select-box" style="width:200px;">
            <option>请选择一级指标</option>
        </select>

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

效果如下图

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

结束!

 

posted @ 2019-01-23 20:44 aaronthon 阅读( ...) 评论( ...) 编辑 收藏
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值