使用jquery加原生html+css+javascript实现一个树形下拉

本文链接：https://blog.youkuaiyun.com/m0_72270036/article/details/135035254
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./jquery.min.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    .father {
      max-width: 500px;
      margin: 0 auto;
      background-color: #fff;
      padding: 10px;
    }

    #inputid {
      width: 60%;
      height: 30px;
    }

    ul {
      list-style-type: none;
      padding: 0;
    }

    #dataul {
      position: fixed;
      background-color: #ffffff;
      z-index: 999;
      margin-top: 5px;
      width: 50%;
      height: 200px;
      display: none;
      border: 1px solid #ebebeb;
      overflow: scroll;
      box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    }

    #dataul .arrowfather {
      margin-top: 5px;
      position: relative;
    }



    /* 三角形 */
    .cascader-arrow {
      position: absolute;
      top: 50%;
      left: 12px;
      transform: translateY(-50%);
      width: 0;
      height: 0;
      border-top: 7px solid transparent;
      border-bottom: 7px solid transparent;
      border-left: 7px solid #999;
      cursor: pointer;
    }

    .arrow-rotate {
      transform: translateY(-50%) rotate(90deg);
    }

    .cascader-text {
      margin-left: 30px;
      width: 100%;
      display: inline-block;
    }

    .arrowfather:hover {
      background-color: #f5f7fa;
    }

    .sonul {
      display: none;
    }
  </style>
</head>

<body>
  <div class="father">
    <div class="select">
      <input type="text" name="inputname" id="inputid" class="selectinput" onfocus="setfocus(this)"
        oninput="setinput(this);" placeholder="请选择或输入" />
      <ul id="dataul">
        <!-- <li class="datali">
          <div class="arrowfather">
            <i class="cascader-arrow"></i>
            <span class="cascader-text">浙江省</span>
          </div>
          <ul class="sonul">
            <li>
              <div class="arrowfather">
                <i class="cascader-arrow"></i>
                <span class="cascader-text">杭州市</span>
              </div>
              <ul class="sonul" style="margin-left: 10px;">
                <li>
                  <div class="arrowfather">
                    <span class="cascader-text">上城区</span>
                  </div>
                </li>
                <li>
                  <div class="arrowfather">
                    <span class="cascader-text">下城区</span>
                  </div>
                </li>
              </ul>
            </li>
            <li>
              <div class="arrowfather">
                <i class="cascader-arrow"></i>
                <span class="cascader-text">宁波市</span>
              </div>
              <ul class="sonul" style="margin-left: 10px;">
                <li>
                  <div class="arrowfather">
                    <i class="cascader-arrow"></i>
                    <span class="cascader-text">江北区</span>
                  </div>
                </li>
                <li>
                  <div class="arrowfather">
                    <i class="cascader-arrow"></i>
                    <span class="cascader-text">北仓区</span>
                  </div>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="datali">
          <div class="arrowfather">
            <i class="cascader-arrow"></i>
            <span class="cascader-text">江苏省</span>
          </div>
          <ul class="sonul">
            <li>
              <div class="arrowfather">
                <span class="cascader-text">南京市</span>
              </div>
            </li>
            <li>
              <div class="arrowfather">
                <span class="cascader-text">无锡市</span>
              </div>
            </li>
          </ul>
        </li> -->
      </ul>
    </div>
  </div>
</body>
<script>
  var arr = [
    {
      id: "5b1bfa4c4b7d3a6403e57140c02304c8",
      label: "浙江省",
      children: [
        {
          id: "f02eb14d712b29076e438db2bf8de143",
          label: "杭州市",
          children: [
            {
              id: "aaf3190a9ed4c1ee7e91a51240b4b4b4",
              label: "上城区",
              children: [
                {
                  id: "0e490d68a7846asasc644e19062d7de",
                  label: "杭州站",
                  children: [
                    {
                      id: "0e49fsaasdsqe6asasc644e19062d7de",
                      label: "东西路",
                      children: [
                        {
                          id: "d6cc354f055936d7eeb3e8ea4ce73157",
                          label: "洗净2#",
                          children: [
                            {
                              id: "0eee0cb4286a7a1576a244182c9ab813",
                              label: "衬套压入1#",
                            }
                          ]
                        }
                      ]
                    },
                    {
                      id: "0e49fsaasdsqe6dss644e19062d7de",
                      label: "南北路"
                    },
                  ]
                },
                {
                  id: "0e490d68dsqe6asasc644e19062d7de",
                  label: "杭州东站"
                },
              ]
            },
            {
              id: "0e490d68a78464af3ec644e19062d7de",
              label: "下城区"
            },
          ]
        },
        {
          id: "80fae45b4c7161956413ea41b8be4cf3",
          label: "宁波市",
        }
      ]
    },
    {
      id: "5b1bfa4c4b7d3a6403e57140c02304",
      label: "江苏省",
      children: [
        {
          id: "f02eb14d712b29076e438db2bqwer3",
          label: "南京市",
        },
        {
          id: "80fae45b4c71619dsfasf3ea41b8be4cf3",
          label: "无锡市",
        }
      ]
    }
  ]
  var selectOptions = []
  // 创建树形结构的函数
  function createTree(arr, $parent) {
    var $ul = $('<ul>').appendTo($parent);
    $.each(arr, function (index, item) {
      var $li = $('<li>').addClass('datali').attr('id', item.id).appendTo($ul);
      var $div = $('<div>').addClass('arrowfather').appendTo($li);
      if (item.children) {
        var $arrow = $('<i>').addClass('cascader-arrow').appendTo($div);
      }
      var $text = $('<span>').addClass('cascader-text').text(item.label).appendTo($div);
      if (item.children) {
        var $subUl = $('<ul>').addClass('sonul').css('margin-left', '5px').appendTo($li);
        createTree(item.children, $subUl);
      }
    });
  }


  createTree(arr, $('#dataul'));


  // 焦点
  function setfocus(this_) {
    $("#dataul").css({
      "display": "block"
    });
  }

  //输入进行筛选
  function setinput(this_) {
    var inputval = $('#inputid').val()
    console.log(inputval, 'inputval')
  }
  // 点击元素
  $('#dataul').on('click', '.cascader-arrow', function (event) {
    event.stopPropagation();
    var arrow = this;
    var arrowClass = arrow.className;
    if (arrowClass.indexOf('arrow-rotate') !== -1) {
      arrow.className = 'cascader-arrow';
    } else {
      arrow.className = 'cascader-arrow arrow-rotate';
    }
  });

  // 点击三角形
  $('#dataul').on('click', '.cascader-arrow', function () {
    $(this).parent().siblings('.sonul').toggle();
  });

  //点击其他区域隐藏
  $('body').on('click', function (event) {
    var target = event.target || event.srcElement;

    if (target.id == "inputid" || target.id == "dataul") {
      $("#dataul").css({
        "display": "block"
      });
    } else {
      $("#dataul").css({
        "display": "none"
      });
    }
  });

  // 匹配函数
  function findObjById(arr, id) {
    for (var i = 0; i < arr.length; i++) {
      var obj = arr[i];
      if (obj.id === id) {
        return obj;
      } else if (obj.children) {
        var result = findObjById(obj.children, id);
        if (result) {
          return result;
        }
      }
    }
    return null;
  }

  // 点击节点时触发事件,回显input框
  $('#dataul ').on('click', '.cascader-text', function () {
    var parentId = $(this).parent('.arrowfather').parent('li').attr('id');
    var obj = findObjById(arr, parentId);
    if (obj) {
      $("#inputid").val(obj.label);
    }
  });

</script>

</html>