根据后台数据写地区联动

Posted tigerzhang-home

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了根据后台数据写地区联动相关的知识,希望对你有一定的参考价值。

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");

  

以上是关于根据后台数据写地区联动的主要内容,如果未能解决你的问题,请参考以下文章

织梦后台自定义表单联动地区显示为数字的真正解决方法

织梦联动类型地区联动三级修复以及省份-市级-地区分开+高亮

省市区三级菜单联动插件

thinkphp + layui1 省市区联动+全国地区mysql数据库

复选框 省市区 联动(监听input的change事件)

vue中使用市区(地区)联动 复制三步完成