织梦号织梦号

jq二级联动动态创建 使用json数据

二级联动效果演示:

<script src="https://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="" id="select1"><option value="">请选择</option></select>
<select name="" id="select2"><option value="">请选择</option></select>
<script type="text/javascript">
var selectData={
  "前端语言":['html','CSS','JS'],
  "后端语言":['php','asp','java','.net'],
  '建站系统':['dedecms','帝国','WordPress']
};
runselect(selectData);
function runselect(arr){
  var html='';for(var i in arr){html+='<option value="'+[i]+'">'+[i]+'</option>';}$('#select1').append(html);
}
$('#select1').change(function(e){
  var selectValue=e.currentTarget.value,htmlText='',newSelects=selectData[selectValue];
  if(e.currentTarget.selectedIndex>0){
   for(var i in newSelects){htmlText+='<option value="'+newSelects[i]+'">'+newSelects[i]+'</option>';}
  }else{htmlText='<option value="">请选择</option>';}
  $('#select2').html(htmlText);
});
</script>

赞(0) 打赏
转载保留:织梦号 » jq二级联动动态创建 使用json数据

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏