带有选项输入字段的下拉列表
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>【讨论】：
以上是关于带有选项输入字段的下拉列表的主要内容，如果未能解决你的问题，请参考以下文章