三级联动效果演示
//首先要引入JQ库
<select name="" id="select1"><option value="">请选择</option></select>
<select name="" id="select2"><option value="">请选择</option></select>
<select name="" id="select3"><option value="">请选择</option></select>
<script type="text/javascript">
var selectData={
"前端语言":{
'基础语言':['html','CSS','JS'],
"UI库":['Weui','boots'],
'js库':['VUE','node.js']
},
"后端语言":{
'后端基础':['php','asp','java','.net'],
'后端框架':["CI",'ThinkPHP']
},
'建站系统':{
'内容管理系统':['dedecms','帝国','WordPress'],
'论坛系统':['PHPwind','DZ'],
'CRM系统':['悟空CRM','其他']
}
};
var newSelects='';
runselect(selectData);
function runselect(arr,htmlid="#select1"){
var html='';
for(var i in arr){html+='<option value="'+[i]+'">'+[i]+'</option>';}
htmlid=="#select1"?$(htmlid).append(html):$(htmlid).html(html);
}
$('#select1').change(function(e){
newSelects=selectData[e.currentTarget.value];
if(e.currentTarget.value){runselect(newSelects,'#select2');}else{$('#select2').html('<option value="">请选择</option>')}
});
$('#select2').change(function(e){
var selected1=$('#select1').val(),selectValue=e.currentTarget.value,htmlText='',newSelects=selectData[selected1][selectValue];
for(var i in newSelects){htmlText+='<option value="'+newSelects[i]+'">'+newSelects[i]+'</option>';}
$('#select3').html(htmlText);
newSelects="";
});
</script>