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

最新推荐文章于 2023-03-23 14:43:46 发布

weixin_34043301

最新推荐文章于 2023-03-23 14:43:46 发布

阅读量309

点赞数

CC 4.0 BY-SA版权

文章标签：数据库 json

原文链接：http://www.cnblogs.com/TigerZhang-home/p/8268978.html

本文介绍了一个使用JavaScript实现的地区二级联动选择器。该选择器基于后台提供的JSON数据，通过监听第一级选择变化来动态更新第二级选项。文章包含了完整的代码示例。

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

因为后台准备好了地区的数据，现在需要根据后台返回来的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