在dropDownList中实现既能输入一个新值又能实现下拉选的代码

实现既能在下拉菜单中选择已有选项，又能在下拉菜单中输入一个新值的功能，可以通过在 HTML 中使用 select 标签和 input 标签结合的方式实现。

具体步骤如下：

1. 在 HTML 中使用 select 标签创建下拉菜单，同时设置一个默认选项，如下所示：

<select name="example" id="example">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
  <option value="4">选项4</option>
  <option value="5">选项5</option>
  <option value="6">选项6</option>
  <option value="7">选项7</option>
  <option value="other">其他</option>
</select>

在上述代码中，我们创建了一个下拉菜单，其中包含了 7 个预设选项和一个“其他”选项。该“其他”选项的 value 属性被设置为 "other"，以便在后续的 JavaScript 中作为判断依据。

1. 在 HTML 中再添加一个 input 标签，用于输入新的选项值，如下所示：

<input type="text" name="other" id="other" placeholder="请输入其他选项">

在上述代码中，我们创建了一个输入框，该输入框的 name 属性被设置为 "other"，以便后续 JavaScript 中获取输入的值。

1. 使用 JavaScript 代码监听 select 标签和 input 标签的变化，并根据变化来进行相应的处理。代码示例如下：

const select = document.querySelector("#example");    // 获取 select 标签
const otherInput = document.querySelector("#other");   // 获取 input 标签

select.addEventListener("change", (event) => {          // 监听 select 标签的变化事件
  if (event.target.value === "other") {                 // 如果选择的是“其他”，则显示输入框
    otherInput.style.display = "block";
  } else {                                              // 否则隐藏输入框
    otherInput.style.display = "none";
  }
});

otherInput.addEventListener("change", (event) => {      // 监听 input 标签的变化事件
  select.value = event.target.value;                    // 将 select 标签的值设置为输入框的值
});

在上述代码中，我们首先获取了 select 标签和 input 标签，然后分别监听了它们的变化事件。在 select 标签的变化事件中，如果选择的是“其他”，则显示输入框，否则隐藏输入框。在 input 标签的变化事件中，将 select 标签的值设置为输入框的值。

1. 添加 CSS 样式，使输入框与下拉菜单在视觉上更加合并。代码示例如下：

#other {
  display: none;
}

select[name="example"] + input[name="other"] {
  display: inline-block;
  margin-left: 10px;
  width: 150px;
}

在上述代码中，我们将输入框的初始样式设置为“隐藏”，并使用 CSS 选择器 select[name="example"] + input[name="other"] 来选择下拉菜单后面的输入框，使它与下拉菜单在视觉上更加合并。