使用HTML + JavaScript实现多列组合框

使用HTML和JavaScript实现多列组合框，可以通过创建一个自定义的多列组合框组件来实现。以下是一个简单的示例代码：

HTML代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
 <title>多列组合框示例</title>
 <style>
    .column-combobox {
      display: inline-block;
      position: relative;
    }
    .column-combobox select {
      display: inline-block;
    }
  </style>
</head>
<body>
  <div class="column-combobox">
   <select id="column1">
     <option value="">请选择</option>
     <option value="1">选项1</option>
     <option value="2">选项2</option>
     <option value="3">选项3</option>
    </select>
   <select id="column2">
     <option value="">请选择</option>
     <option value="1">选项1</option>
     <option value="2">选项2</option>
     <option value="3">选项3</option>
    </select>
  </div>
 <script src="column-combobox.js"></script>
</body>
</html>

JavaScript代码（column-combobox.js）：

// 获取DOM元素
var column1 = document.getElementById('column1');
var column2 = document.getElementById('column2');

// 监听第一列的变化
column1.addEventListener('change', function() {
  // 清空第二列的选项
  column2.innerHTML =<option value="">请选择</option>';

  // 根据第一列的选项，生成第二列的选项
  var value = column1.value;
  if (value === '1') {
    column2.innerHTML +=<option value="1">选项1-1</option>';
    column2.innerHTML +=<option value="2">选项1-2</option>';
  } else if (value === '2') {
    column2.innerHTML +=<option value="1">选项2-1</option>';
    column2.innerHTML +=<option value="2">选项2-2</option>';
  } else if (value === '3') {
    column2.innerHTML +=<option value="1">选项3-1</option>';
    column2.innerHTML +=<option value="2">选项3-2</option>';
  }
});

在这个示例中，我们创建了一个自定义的多列组合框组件，包含两个下拉框。当第一个下拉框的选项发生变化时，会根据第一个下拉框的选项生成第二个下拉框的选项。这样就实现了一个简单的多列组合框。