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