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

发布于 2024-09-27 17:40:25 字数 731 浏览 3 评论 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>

原文

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

星星的轨迹 2024-10-04 17:40:25

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

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

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

To permanently add you need a server-side script.

To temporarily add you can use 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)

回复收藏 0 原文

盛夏已如深秋| 2024-10-04 17:40:25

您可以像这样动态添加：

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

selectId 是

对于您的代码，将其称为如

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

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

document.getElementById(selectId).options.length;

这一点：说，

你可能想将其添加到
下拉菜单，以及传递给
服务器，添加到某个表，用于
实例。你可能必须这样做
当您将其添加到时，通过 AJAX 调用
下拉菜单
添加新项目
双击文本框是
不太好用。模糊可能是
选项。更好的是在后面添加一个“添加”按钮
文本框。

You add an <option> dynamically like this:

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>, optText is the text to be displayed in the dropdown and optValue is the value that will be sumbitted to the server.

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 can do it via 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 .

回复收藏 0 原文

鹤舞 2024-10-04 17:40:25

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

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

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:

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

回复收藏 0 原文

~没有更多了~