Question

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

Answer 1

您可以尝试以下方式：

$("#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>

Answer 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/

Answer 3

您可以尝试使用带有标记选项的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以添加并选择新条目。

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

3 个答案: