如何让 HTML 组合框保存用户在文本框中添加的值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3940255/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make HTML combo box save values added by user in textbox?
提问by XCeptable
I have made a combobox for a web page. It takes values from user into text box & adds those to list on double click in text box. I want to make user entered values permanently stored as option in list. How can I do it. One more question is how can I count the number of options in list so that I add an element next to that. Here is my code.
我为网页制作了一个组合框。它将用户的值输入到文本框中，并在文本框中双击时将这些值添加到列表中。我想让用户输入的值永久存储为列表中的选项。我该怎么做。还有一个问题是如何计算列表中选项的数量，以便在其旁边添加一个元素。这是我的代码。
<html>
<head>
<script language="javascript">
function AddListItem(form)
{
var TestVar = form.txtInput.value;
form.txtInput.value = "";
form.select.options[3]=new Option(TestVar, TestVar, true);
}
</script>
<head>
<body>
<form id='Form1'>
<input id='txtInput' type='text' maxlength = "5" size="5" ondblclick="AddListItem(this.form)"/>
<p>
<select id='select'>
<option>abc</option>
<option>cde</option>
<option>efg</option>
</select>
</form>
</body>
</html>
采纳答案by Ben
To permanently add you need a server-side script.
要永久添加，您需要一个服务器端脚本。
To temporarily add you can use javascript:
要临时添加，您可以使用 javascript：
function addVal(newVal) {
var sel = document.getElementById('select');
var opt = document.createElement("OPTION");
sel.addChildNode(opt);
opt.innerHTML = newVal;
opt.value = newVal; //(alternatively)
}
To count the number of options:
要计算选项的数量：
function countOpts() {
var sel document.getElementById('select');
return sel.options.length;
}
(only for conceptual use, not tested as functional)
（仅用于概念用途，未进行功能测试）
回答by Nivas
You add an <option>dynamically like this:
您<option>可以像这样动态添加：
function add(selectId, optText, optValue)
{
var newOption = document.createElement("option")
newOption.text = optText;
newOption.value = optValue;
document.getElementById(selectId).options.add(newOption);
}
selectId is the id of <select>, optTextis the text to be displayed in the dropdown and optValueis the value that will be sumbitted to the server.
selectId 是 的 id <select>，optText是要在下拉列表中显示的文本，是optValue将被提交到服务器的值。
For your code, call it as
对于您的代码，将其称为
<input id='txtInput' type='text' maxlength = "5" size="5" ondblclick="add('select', this.value, this.value)"/>
As you see, you don't really need to find the length of the options, but you cando it via options.length:
如您所见，您实际上并不需要找到选项的长度，但您可以通过options.length以下方式进行：
document.getElementById(selectId).options.length;
That said,
那说，
- You might want to add this to the dropdown, as well as to pass to the server, to add to some table, for instance. You might have to do that call via AJAX, when you add it to the dropdown
- Adding the new item on double click of the textbox is not very usable. On blur might be an option. Better is an 'Add' button after the textbox .
- 例如，您可能希望将此添加到下拉列表中，以及传递给服务器，以添加到某个表中。当您将其添加到下拉列表时，您可能必须通过 AJAX 执行该调用
- 双击文本框添加新项目不是很有用。模糊可能是一种选择。更好的是文本框后面的“添加”按钮。
回答by Ben
Sounds like you need a server-side script then. When you submit the form, you can have a field that is 'remembering' all of the dropdown options:
听起来你需要一个服务器端脚本。当您提交表单时，您可以有一个“记住”所有下拉选项的字段：
The simplified HTML:
简化的 HTML：
<form method='post' action=''>
<input name='newDDoption' />
<input type='hidden' name='ddStorage' value='<?PHP echo implode("|||",$ddOptions); ?>' />
<button>GO</button>
</form>
The simplified PHP:
简化的PHP：
<?PHP
$ddOptions = explode("|||",$_POST['ddStorage']);
$ddOptions[] = $_POST['newDDoption'];
echo "<select>";
for($x=0;$x<count($ddOptions);$x++) {
echo "<option>".$ddOptions[$x]."</option>";
}
echo "</select>";
?>
To explain: PHP saves the ddOptions in the form -> User enters new option -> The form is submitted -> PHP finds the stored values -> PHP pushes on the new value -> PHP loops through and creates your permanent dropdown menu.
解释一下：PHP 将 ddOptions 保存在表单中 -> 用户输入新选项 -> 表单已提交 -> PHP 查找存储的值 -> PHP 推送新值 -> PHP 循环并创建您的永久下拉菜单。
