带有选项输入字段的下拉列表答案

【问题标题】：Drop Down List with option input field带有选项输入字段的下拉列表
【发布时间】：2018-12-30 11:03:28
【问题描述】：

可以使用输入文本框字段创建下拉列表，我们可以通过位于同一下拉列表中的文本框创建新列表

【问题讨论】：

什么？请改写您的问题，提供您尝试过的内容以及您想要实现的目标
我希望下拉列表在列表底部有文本框输入字段，这样我就可以从文本框插入新列表
再次...仍然不明白您想说什么...您能提供您尝试过的代码示例吗？因为使用<select> 元素可以轻松制作下拉列表。我感到困惑的两个地方是：“列表底部的文本框输入字段”和“从文本框插入新列表”
等待分钟...
问题询问“有没有办法做 X？” /“我可以做 X 吗？” /“有可能做X吗？”很少适用于 Stack Exchange 格式。答案通常是“是”，但有时是“否”。无论哪种方式，这个问题通常都不是很有效。此外，通常的意思是“我该怎么做 X？”，对于 Stack Overflow 来说，这通常但并不总是过于宽泛。请edit你的问题澄清你想要什么。现在，这是一个“是”/“否”的问题。请看：Why is “Is it possible to…” a poorly worded question?

标签： javascript jquery html css bootstrap-4

【解决方案1】：

您可以尝试使用带有标记选项的select2 库（也需要JQuery）：

$(".form-control").select2({
  tags: true
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select class="form-control">
  <option selected="selected">orange</option>
  <option>white</option>
  <option>purple</option>
</select>

您可以打开下拉列表，在文本框中键入，然后按 ENTER 添加并选择新条目。

【讨论】：

【解决方案2】：

<!doctype html>
<html lang="en">
<head>
<style>
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}
</style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
 <div class="dropdown">
  <span>Mouse over me</span>
  <div id="myDropdown" class="dropdown-content">
    <textarea id="listTxtArea" rows="4" cols="50">Type your input here...</textarea>
    <button type="button" onclick="addToList()">Add to list</button>
  </div>
</div>
 
 
<script>
function addToList() {
$( "#listTxtArea" ).before( "<p>"+ $('#listTxtArea').val() +"</p>" );
$('#listTxtArea').val("Type your input here...");
}

</script>
 
</body>
</html>

你在寻找这样的东西吗？

https://jsfiddle.net/1etswz32/

【讨论】：

【解决方案3】：

您可以尝试以下方法：

$("#btnAdd").on('click', function(){
  var val = $('#txtItem').val().trim();
  if(!val) {
    alert('No value');
    return false;
  }
  $('#mySelect').append($('<option>', {
      value: val,
      text: val
  }));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="mySelect"></select>
<div>
  Item: <input type="text" id="txtItem"/>
  <button type="button" id="btnAdd">Add</button>
</div>

【讨论】：