织梦二次开发
当前位置: 主页 > dede教程 >

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

2019-03-29 TAG:
二级联动效果演示:

<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>

评论

看不清?点击更换

评论精选提示:无意义评论会被屏蔽!