如何使 HTML 组合框保存用户在文本框中添加的值？答案

【问题标题】：How to make HTML combo box save values added by user in textbox?如何使 HTML 组合框保存用户在文本框中添加的值？
【发布时间】：2010-10-15 07:26:23
【问题描述】：

我为网页制作了一个组合框。它将用户的值带入文本框中，并在文本框中双击将这些值添加到列表中。我想让用户输入的值永久存储为列表中的选项。我该怎么做。还有一个问题是如何计算列表中选项的数量，以便在其旁边添加一个元素。这是我的代码。

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

【问题讨论】：

标签： html combobox count options permanent

【解决方案1】：

要永久添加，您需要一个服务器端脚本。

临时添加可以使用javascript：

function addVal(newVal) {
  var sel = document.getElementById('select');
  var opt = document.createElement("OPTION");

  sel.addChildNode(opt);
  opt.innerHTML = newVal;
  opt.value = newVal; //(alternatively)
}

计算选项的数量：

function countOpts() {
  var sel document.getElementById('select');
  return sel.options.length;
}

（仅用于概念用途，未作为功能测试）

【讨论】：

我试过你的代码史蒂夫它不起作用，我将它应用到我的表单中。这是我所做的，" function AddListItem(form) { var TestVar = form.txtInput.value; form.txtInput.value = ""; var sel = form.select; //var count = sel.options.length; var opt = form.createElement("OPTION"); sel.addChildNode(opt); opt.innerHTML = TestVar; opt.value = TestVar; //form.select.options[count]=new Option(TestVar, TestVar, true) ; }" 我从你的代码中了解到的是它为一个会话创建子节点
如果我这样做，它可以工作，但刷新页面时所有新添加的选项都会消失。 " function AddListItem(form) { var count = form.select.options.length; var TestVar = form.txtInput.value; form.txtInput.value = ""; form.select.options[count]=new Option(TestVar, TestVar, true); } "
评论 1 - 不是会话，只是窗口的当前实例。评论 2 - 是的，这是对你不利的临时事情。请参阅下面的回复。

【解决方案2】：

您可以像这样动态添加<option>：

function add(selectId, optText, optValue)
{
    var newOption = document.createElement("option") 
    newOption.text = optText;
    newOption.value = optValue;
    document.getElementById(selectId).options.add(newOption);
}

selectId 是<select> 的id，optText 是要显示在下拉列表中的文本，optValue 是要提交到服务器的值。

对于您的代码，将其称为

<input id='txtInput' type='text' maxlength = "5" size="5" ondblclick="add('select', this.value, this.value)"/>

如您所见，您实际上并不需要找到选项的长度，但您可以通过options.length：

document.getElementById(selectId).options.length;

也就是说，

您可能希望将此添加到下拉菜单，以及传递给服务器，添加到某个表中，用于实例。你可能不得不这样做通过 AJAX 调用，当您将其添加到下拉菜单
添加新项目双击文本框是不太好用。模糊可能是一个选项。更好的是在文本框。

【讨论】：

thanX a Lot Nivas:-) 在使用你的代码之前我是这样做的，”function AddListItem(form) { var count = form.select.options.length; var TestVar = form.txtInput。 value; form.txtInput.value = ""; form.select.options[count]=new Option(TestVar, TestVar, true); } "我的代码的行为就像所有新添加的选项在刷新时都被清除。然后我现在检查 urs 并且它的行为方式也相同。因为你是使用“createElement”做的，所以我认为你的选项可能至少会保留一个会话。我正在尝试一步一步地做。现在我需要从 php 服务器获取 & 渲染 JSON 数据。

【解决方案3】：

听起来你需要一个服务器端脚本。当您提交表单时，您可以拥有一个“记住”所有下拉选项的字段：

简化的 HTML：

<form method='post' action=''>
  <input name='newDDoption' />
  <input type='hidden' name='ddStorage' value='<?PHP echo implode("|||",$ddOptions); ?>' />
  <button>GO</button>
</form>

简化的 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>";
?>

解释一下：PHP 将 ddOptions 保存在表单中 -> 用户输入新选项 -> 提交表单 -> PHP 找到存储的值 -> PHP 推送新值 -> PHP 循环并创建您的永久下拉列表菜单。

【讨论】：