html多栏布局 (html多输入框)

实现效果
html怎么做下拉框,html多栏布局
代码：
<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
  <title>级联下拉框示例</title>
  <style>
    /* 下拉框样式 */
    #cascade-select {
      padding: 8px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <select id="cascade-select" onchange="cascadeOptions()">
    <option value="">请选择</option>
    <option value="option1">选项1</option>
    <option value="option2">选项2</option>
  </select>

  <script>
    var cascadeSelect = document.getElementById("cascade-select");

    var options = {
      option1: {
        text: "选项1",
        values: ["子选项1-1", "子选项1-2", "子选项1-3"]
      },
      option2: {
        text: "选项2",
        values: ["子选项2-1", "子选项2-2", "子选项2-3"]
      }
    };

    function cascadeOptions() {
      var selectedOption = cascadeSelect.value;
      var childOptions = options[selectedOption].values;

      cascadeSelect.innerHTML = "<option value=''>请选择</option>";

      childOptions.forEach(function(option) {
        var optionElement = document.createElement("option");
        optionElement.text = option;
        cascadeSelect.add(optionElement);
      });

      // 自动展开下一级选项
      cascadeSelect.size = childOptions.length + 1;
    }
  </script>
</body>
</html>