css 两排下拉框

CSS是前端开发中不可或缺的一部分，下面我们来讲述一下如何用CSS实现两排下拉框。

首先，在HTML中创建两个下拉框：

  <select name="first" id="first">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <select name="second" id="second">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
  </select>

然后，使用CSS将它们放在同一行并且水平排列：

  select {
    display: inline-block;
    width: 150px;
    margin-right: 10px;
  }

最后，为了让第一个下拉框的选项影响第二个下拉框的选项，我们可以使用JavaScript，监听第一个下拉框的change事件，然后使用选中的选项来更新第二个下拉框：

  const firstSelect = document.querySelector('#first');
  const secondSelect = document.querySelector('#second');

  firstSelect.addEventListener('change',() => {
    const selectedOption = firstSelect.options[firstSelect.selectedindex].value;
    // 根据选中的选项更改第二个下拉框的选项
  });

以上就是使用CSS实现两排下拉框的完整方案，希望对您有所帮助。