根据数据库字典项完成地区二级联动

因为后台准备好了地区的数据,现在需要根据后台返回来的json格式数据完成地区的二级联动

function initAreaSelect(firstLevelId, secondLevelId) {
  var firstLevel=document.getElementById(firstLevelId);
  var secondLevel=document.getElementById(secondLevelId);
  //插入第一级数据
  for (var i=0; i<localArea.data.children.length; i++) {
    var firstLevelNode=localArea.data.children[i];
    var optionNode = document.createElement("option");
    optionNode.text=firstLevelNode.name;
    optionNode.value=firstLevelNode.id;
    firstLevel.appendChild(optionNode);
  }
  //第一级改变时,修改第二级的select
  firstLevel.onchange=function() {
    var selectId=firstLevel.options[firstLevel.selectedIndex].value;
    var selectName=firstLevel.options[firstLevel.selectedIndex].text;
    var formatFirstLevel = selectId +"-"+selectName;
    var sLength=secondLevel.length;
    for (var i=0; i<sLength; i++) secondLevel.remove(0);
    for (var i=0; i<localArea.data.children.length; i++) {
      var firstLevelNode=localArea.data.children[i];
      if (firstLevelNode.id==selectId) {
        if (firstLevelNode.children) {
          var optionNode = document.createElement("option");
          optionNode.text="请选择";
          optionNode.value=-1;
          secondLevel.appendChild(optionNode);
          for (var j=0; j<firstLevelNode.children.length; j++) {
            var secondLevelNode=firstLevelNode.children[j];
            var optionNode = document.createElement("option");
            optionNode.text=secondLevelNode.name;
            optionNode.value=secondLevelNode.id;
            secondLevel.appendChild(optionNode);
          }
        }
        break;
      }
    }
    secondLevel.onchange=function() {
	  var selectId=secondLevel.options[secondLevel.selectedIndex].value;
	  var selectName=secondLevel.options[secondLevel.selectedIndex].text;
	  var formatSecondLevel = selectName +"-"+selectId;
	  $("#localworkarea").val(formatFirstLevel +","+formatSecondLevel);
	}
  }
}
initAreaSelect("workCity", "workArea");

  

原文地址:https://www.cnblogs.com/TigerZhang-home/p/8268978.html