使用jquery实现一个简单的三级联动_jq三级联动-优快云博客

本文链接：https://blog.youkuaiyun.com/zhang01457/article/details/103574703

本文介绍了一种使用JavaScript和jQuery库动态生成下拉菜单的方法，该方法可根据预定义的数据结构自动生成多级联选下拉菜单，适用于各种前端场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//首先要引入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>