二级下拉框的代码如何编写

二级下拉框的代码可以使用HTML、CSS和JavaScript来编写。以下是一个基本的示例：

HTML部分：

<select id="first-dropdown">
  <option value="">请选择</option>
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>
<select id="second-dropdown">
  <option value="">请选择</option>
</select>

CSS部分：

#second-dropdown {
  display: none;
}

JavaScript部分：

var firstDropdown = document.getElementById('first-dropdown');
var secondDropdown = document.getElementById('second-dropdown');

firstDropdown.addEventListener('change', function() {
  if (firstDropdown.value === '') {
    secondDropdown.style.display = 'none';
  } else {
    secondDropdown.style.display = 'inline-block';
  }
  
  // 根据第一个下拉框的选项动态生成第二个下拉框的选项
  // 以下是示例代码，需要根据具体需求进行修改
  if (firstDropdown.value === '1') {
    secondDropdown.innerHTML = '<option value="11">选项1-1</option><option value="12">选项1-2</option><option value="13">选项1-3</option>';
  } else if (firstDropdown.value === '2') {
    secondDropdown.innerHTML = '<option value="21">选项2-1</option><option value="22">选项2-2</option><option value="23">选项2-3</option>';
  } else if (firstDropdown.value === '3') {
    secondDropdown.innerHTML = '<option value="31">选项3-1</option><option value="32">选项3-2</option><option value="33">选项3-3</option>';
  }
});

上述代码实现了一个简单的二级下拉框，当第一个下拉框的选项改变时，根据选项动态生成第二个下拉框的选项，并显示或隐藏第二个下拉框。需要注意的是，实际使用时需要根据具体需求进行修改和完善。