js下拉框联动

下拉框联动通常可以通过监听父级下拉框的change事件，然后根据选中的值动态生成子级下拉框的选项。以下是一个简单的示例代码：

HTML：

<select id="parent">
  <option value="">请选择</option>
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>

<select id="child">
  <option value="">请选择</option>
</select>

JavaScript：

var childOptions = {
  '1': ['子选项1', '子选项2', '子选项3'],
  '2': ['子选项4', '子选项5'],
  '3': ['子选项6', '子选项7', '子选项8']
};

var parent = document.getElementById('parent');
var child = document.getElementById('child');

parent.addEventListener('change', function() {
  var value = this.value;
  if (value === '') {
    child.innerHTML = '<option value="">请选择</option>';
    return;
  }
  var options = childOptions[value];
  var html = '<option value="">请选择</option>';
  for (var i = 0; i < options.length; i++) {
    html += '<option value="' + options[i] + '">' + options[i] + '</option>';
  }
  child.innerHTML = html;
});

在这个示例代码中，我们定义了一个名为childOptions的对象，它的属性代表父级下拉框的选项值，值为一个数组，代表对应的子级下拉框的选项。在监听父级下拉框的change事件时，我们根据选中的值动态生成子级下拉框的选项。