html 无限自定义下拉联动

HTML无法实现无限自定义下拉联动，需要使用JavaScript或其他前端框架来实现。以下是一个简单的下拉联动示例：

HTML代码：

<select id="select1" onchange="updateSelect2()">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

<select id="select2">
  <option value="1">Suboption 1</option>
  <option value="2">Suboption 2</option>
  <option value="3">Suboption 3</option>
</select>

JavaScript代码：

function updateSelect2() {
  var select1 = document.getElementById("select1");
  var select2 = document.getElementById("select2");
  var option1 = select1.options[select1.selectedIndex].value;
  
  // Clear select2 options
  select2.innerHTML = "";
  
  // Add new options based on option1 value
  if (option1 == "1") {
    select2.innerHTML += '<option value="1">Suboption 1</option>';
    select2.innerHTML += '<option value="2">Suboption 2</option>';
  } else if (option1 == "2") {
    select2.innerHTML += '<option value="3">Suboption 3</option>';
    select2.innerHTML += '<option value="4">Suboption 4</option>';
  } else if (option1 == "3") {
    select2.innerHTML += '<option value="5">Suboption 5</option>';
    select2.innerHTML += '<option value="6">Suboption 6</option>';
  }
}

此示例仅演示了两个下拉框的联动，您可以根据需要添加更多下拉框并扩展JavaScript代码以实现无限自定义下拉联动