如何将输入文本字段添加到select元素中

我尝试开发一个带有“Selected”（已选择）的自定义选择框

如何在打开的选择框底部添加一个输入文本字段（“egene Auflage”），如果有人单击该字段键入内容，该字段会将其值添加到顶部。请参见图片：）

我是否必须将选择/选项更改为ul/li

这是我的标记：

<select class="replace-select">
  <option value="select-filled-1">Select Filled 1</option>
  <option value="select-filled-2">Select Filled 2</option>
  <option value="select-filled-3">Select Filled 3</option>
  <option value="select-filled-4">Select Filled 4</option>
  <option value="select-filled-5">Select Filled 5</option>
  <option value="select-filled-6">Select Filled 6</option>
  <option value="select-filled-7">Select Filled 7</option>
  <option value="select-filled-8">Select Filled 8</option>
</select>

选择填充1
选择填充2
选择填充3
选择填充4
选择填充5
选择填充6
选择7
选择填充8

只需将一个文本框附加到所选对象创建的下拉div中，并使用事件将文本框的内容添加到原始select中，就可以做到这一点。只需使用jQuery将文本框附加到正确的元素中

它的工作原理是当您初始化select时，它隐藏select并在几个div内创建一组自定义的嵌套li。下拉div具有class.selected drop，因此您只需要使用jQuery选择带有

$（“.selected drop”）

的元素，然后使用

$将文本框附加到该元素。append（…）

。然后，您的事件处理程序只需获取该文本框的内容并将其添加到原始select

$（文档）.ready（函数（）{
//初始化所选的。
$（“#chosenSelect”）。已选择({
宽度：“100px”
});
//附加文本框
$（“#selectContainer.selected drop”）.append（“”）；
//单击事件以输入键
$（'.selected input'）.bind（“enterKey”，函数（e）{
//获取文本框的值，并将其添加到“选择”。
var newValue=$（“.selected input”）.val（）；
//使用模板文本将newValue插入到选项HTML中
var optionHTML=`${newValue}`；
$（“#chosenSelect”）.prepend（optionHTML）.trigger（“已选择：已更新”）；
//在添加到选择后清除文本框
$（“.selected input”）.val（“”）；
});
//注意回车键
$（'.selected input'）.keyup（函数（e）{
如果（e.keyCode==13）{
$（此）.trigger（“enterKey”）；
}
});
})；

。选择的输入{
宽度：100%
}

按enter键添加要选择的新项目


1.
2.
3.
4.