标签:text div UNC 默认 三级 options script log page
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; } } }
效果如下图
前后端互动,请看下篇博客。
结束!
标签:text div UNC 默认 三级 options script log page
原文地址:https://www.cnblogs.com/aaronthon/p/10311339.html