zoukankan      html  css  js  c++  java
  • 根据数据库字典项完成地区二级联动

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

      

  • 相关阅读:
    合肥程序员欢迎进QQ群49313181同城程序员职业交流群
    新一代程序员的思考
    ThinkPHP开发系列一框架搭建
    ASP.NET MVC4+EF系列之五 架构介绍
    ASP.NET MVC4+EF系列之阶段源码一
    gcc g++ Linux下动态库_静态库 指定路径问题
    [转]accept() 产生的Socekt端口是多少?
    阿里云计算资深总监唐洪:飞天大规模分布式计算系统解析
    [转] C++中##(两个井号)和#(一个井号)用法
    deep learning 深度学习
  • 原文地址:https://www.cnblogs.com/TigerZhang-home/p/8268978.html
Copyright © 2011-2022 走看看