jquery select 5级联动,级别会根据数据不通调整最多为5级,写个漂亮的demo

好的，这是一个基于 jQuery 的 5 级联动示例代码：

HTML 代码：

<div>
  <select class="level1">
    <option value="">请选择一级选项</option>
    <option value="option1">选项1</option>
    <option value="option2">选项2</option>
    <option value="option3">选项3</option>
  </select>
  <select class="level2">
    <option value="">请选择二级选项</option>
  </select>
  <select class="level3">
    <option value="">请选择三级选项</option>
  </select>
  <select class="level4">
    <option value="">请选择四级选项</option>
  </select>
  <select class="level5">
    <option value="">请选择五级选项</option>
  </select>
</div>

JavaScript 代码：

$(document).ready(function() {
  var data = {
    "option1": {
      "suboptions": {
        "suboption1": {
          "subsuboptions": {
            "subsuboption1": {},
            "subsuboption2": {}
          }
        },
        "suboption2": {
          "subsuboptions": {
            "subsuboption3": {},
            "subsuboption4": {}
          }
        }
      }
    },
    "option2": {
      "suboptions": {
        "suboption3": {
          "subsuboptions": {
            "subsuboption5": {},
            "subsuboption6": {}
          }
        },
        "suboption4": {
          "subsuboptions": {
            "subsuboption7": {},
            "subsuboption8": {}
          }
        }
      }
    },
    "option3": {
      "suboptions": {
        "suboption5": {
          "subsuboptions": {
            "subsuboption9": {},
            "subsuboption10": {}
          }
        },
        "suboption6": {
          "subsuboptions": {
            "subsuboption11": {},
            "subsuboption12": {}
          }
        }
      }
    }
  };

  function populateSelectOptions(selectElement, options) {
    selectElement.empty();
    selectElement.append('<option value="">请选择选项</option>');
    $.each(options, function(key, value) {
      selectElement.append('<option value="' + key + '">' + key + '</option>');
    });
  }

  function populateSuboptions(selectedOption, level) {
    var suboptions = selectedOption.data("suboptions");
    if (suboptions) {
      var selectElement = $(".level" + (level + 1));
      populateSelectOptions(selectElement, suboptions);
      selectElement.show();
    }
  }

  function populateSubsuboptions(selectedOption, level) {
    var subsuboptions = selectedOption.data("subsuboptions");
    if (subsuboptions) {
      var selectElement = $(".level" + (level + 1));
      populateSelectOptions(selectElement, subsuboptions);
      selectElement.show();
    }
  }

  function hideSuboptions(level) {
    for (var i = level + 1; i <= 5; i++) {
      $(".level" + i).hide();
      $(".level" + i).empty();
    }
  }

  $(".level1").change(function() {
    var selectedOption = $(this).find(":selected");
    hideSuboptions(1);
    populateSuboptions(selectedOption, 1);
  });

  $(".level2").change(function() {
    var selectedOption = $(this).find(":selected");
    hideSuboptions(2);
    populateSubsuboptions(selectedOption, 2);
  });

  $(".level3").change(function() {
    var selectedOption = $(this).find(":selected");
    hideSuboptions(3);
    populateSubsuboptions(selectedOption, 3);
  });

  $(".level4").change(function() {
    var selectedOption = $(this).find(":selected");
    hideSuboptions(4);
    populateSubsuboptions(selectedOption, 4);
  });

  populateSelectOptions($(".level1"), data);
});

这个示例代码使用了一个 JavaScript 对象来模拟选项数据。你可以将其替换为你自己的数据结构。在这个示例中，每个选项都有一个 `suboptions` 属性，它是一个包含子选项的对象。每个子选项都有一个 `subsuboptions` 属性，它是一个包含子子选项的对象。你可以根据你的实际需求来修改这个数据结构。

这个示例代码使用了 jQuery 的 `change` 事件来监听每个下拉列表的选择变化。当一级选项的值改变时，它会重新填充二级选项；当二级选项的值改变时，它会重新填充三级选项；以此类推，直到五级选项。如果某个选项没有子选项，则不会填充下一级选项，并且所有下一级选项都会被隐藏。