0

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

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

3 回答 3

0

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

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

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

于 2010-10-15T07:44:57.470 回答
0

您<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. 双击文本框添加新项目不是很有用。模糊可能是一种选择。更好的是文本框之后的“添加”按钮。
于 2010-10-15T07:45:18.310 回答
0

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

简化的 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 循环并创建您的永久下拉菜单。

于 2010-10-18T08:42:55.477 回答