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

StackOverflow https://stackoverflow.com/questions/3940255

题

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

<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>
有帮助吗？

解决方案

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

要暂时添加您可以使用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;
}

（仅用于概念使用，不被测试为功能）

其他提示

您添加一个 <option> 这样的动态：

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

SelectID是ID <select>, 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;

就是说，

  1. 例如，您可能需要将其添加到下拉列表中，并将其传递到服务器，以添加到某些表中。当您将其添加到下拉列表时，您可能必须通过Ajax进行电话
  2. 在文本框的双击中添加新项目不是很可用。在Blur上可能是一种选择。在文本框之后，“添加”按钮更好。

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

简化的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循环推动 - > php loops逐渐通过，并创建永久下拉菜单。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top