js原生实现树结构数据-级联组件-区-乡-村

最新推荐文章于 2024-08-09 07:58:02 发布

造糖主义

最新推荐文章于 2024-08-09 07:58:02 发布

阅读量319

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_45408578/article/details/129065970

版权

文章提供了一个使用JavaScript实现HTML级联下拉菜单的示例，数据以树结构存储，包括省、市、区/县三个级别。当用户在省选择器中选择一项时，市选择器会更新相应的内容，同样，市选择器的选择会更新区/县选择器。代码通过遍历数据对象来填充下拉选项并监听改变事件以实现联动效果。

摘要由CSDN通过智能技术生成

实现的html

       <tr>
             <td class="td_s"><span style="color: #f00">*</span>村地址</td>
              <td class="td_i" colspan="3">
                <select name="szqx" id="szqx" style="width: 30%"></select>
                <select name="szxz" id="szxz" style="width: 30%"></select>
                <select name="szcl" id="szcl" style="width: 30%"></select>
              </td>
        </tr>

已有的树结构数据

在这里插入图片描述

实现级联的代码

var obj = {
    // 河南: ["郑州", "周口", "商丘", "安阳", "南阳"],
    // 云南: ["大理", "丽江", "昆明", "玉溪"],
  };
  var obj1 = {
    // 郑州: ["金水区", "新郑市", "二七区", "中牟县"],
    // 周口: ["鹿邑县", "郸城县", "21", "121"],
    // 商丘: ["1223", "321", "321", "123"],
    // 安阳: ["滑县", "21", "321"],
    // 南阳: ["111", "222", "333", "444"],
    // 大理: ["AAA", "BBB", "CCC", "DDD"],
    // 丽江: ["EEE", "FFF", "GGG", "HHH"],
    // 昆明: ["III", "JJJ", "KKK", "RRR"],
    // 玉溪: ["MMM", "NNN", "XXXX"],
  };
  obj = getfirst();
  obj1 = getlast();
  //   第一层
  //for-in循环输出obj的Key
  for (var x in obj) {
    $("<option>" + x + "</option>").appendTo("#szqx");
  }
  //创建一个改变事件获取框中被选中的地名获得值
  $("#szqx").change(function () {
    var arr = $(this).val();
    //获取的值为obj的key 这里将obj的值赋给arr
    var arr1 = obj[arr];
    //清除上次点击打印出来的值
    $("#szxz").html("");
    //循环输出arr的值
    for (var i = 0; i < arr1.length; i++) {
      $("<option>" + arr1[i] + "</option>").appendTo("#szxz");
    }
    //虚拟点击
    $("#szxz").change();
  });
  //基本同上不过是利用obj的值当作obj1的key获取obj1的值
  $("#szxz").change(function () {
    var arr2 = $(this).val();
    var arr3 = obj1[arr2];
    $("#szcl").html("");
    for (var j = 0; j < arr3.length; j++) {
      $("<option>" + arr3[j] + "</option>").appendTo("#szcl");
    }
  });
  //虚拟点击点击
  $("#szqx").change();

数据处理

function getData() {
  return data;
}
function getfirst() {
  let arr = {};
  let temp = data.children;
  for (let index = 0; index < temp.length; index++) {
    let tempArr = [];
    let oneList = temp[index];
    for (let jindex = 0; jindex < oneList.children.length; jindex++) {
      tempArr.push(oneList.children[jindex].text);
    }
    arr[oneList.text] = tempArr;
  }
  return arr;
}
function getlast() {
  let arr = {};
  let temp = data.children;
  for (let index = 0; index < temp.length; index++) {
    let oneList = temp[index];
    for (let jindex = 0; jindex < oneList.children.length; jindex++) {
      var lastList = oneList.children[jindex];
      let tempArr = [];
      for (let zindex = 0; zindex < lastList.children.length; zindex++) {
        tempArr.push(lastList.children[zindex].text);
      }
      arr[lastList.text] = tempArr;
    }
  }
  return arr;
}