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

Posted

技术标签:

【中文标题】带有选项输入字段的下拉列表【英文标题】: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? 【参考方案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>

【讨论】:

以上是关于带有选项输入字段的下拉列表的主要内容,如果未能解决你的问题,请参考以下文章

从一个下拉列表中选择一个选项会填充其他输入字段

如何验证下拉列表中的“其他”选项?

如何使用下拉列表的不同选项自动填充编辑字段?

在CodeIgniter中验证失败后重置下拉列表值

C# 模糊查询带出下拉列表的问题

在“选择”/下拉 HTML 列表中手动输入值?