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;
}
}
}
效果如下图
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiI0gTMx81dsQWZ4lmZf1GLlpXazVmcvwFciV2dsQXYtJ3bm9CX9s2RkBnVHFmb1clWvB3MaVnRtp1XlBXe0xCMy81dvRWYoNHLwEzX5xCMx8FesU2cfdGLwMzX0xiRGZkRGZ0Xy9GbvNGLpZTY1EmMZVDUSFTU4VFRR9Fd4VGdsYTMfVmepNHLrJXYtJXZ0F2dvwVZnFWbp1zczV2YvJHctM3cv1Ce-cGcq5yM0QjM0IWO2MTOkVmM0MDMzYzX1QDO0YTMyIzLchDMyIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjLyM3Lc9CX6MHc0RHaiojIsJye.jpg)
前后端互动,请看下篇博客。
结束!