<Select> onChange 仅工作一次，并使用 getElementsByName 设置值答案

【问题标题】：<Select> with onChange working only once, and setting values with getElementsByName<Select> onChange 仅工作一次，并使用 getElementsByName 设置值
【发布时间】：2012-09-03 22:42:29
【问题描述】：

我在一个页面上有各种表单，页面顶部有一个 PHP 生成的选择。

我想做的是：

用户从表单中选择一个选项。
选项的值被放入具有特定名称的所有输入中。
用户可以选择另一个选项，该选项的值将替换输入的旧值。

我到目前为止的代码（不起作用）：它不起作用，因为 onChange 仅在第一次您选择一个选项时触发，并且输入的值不会更新为所选选项的值。

选择：（它可以多于或少于三个选项，具体取决于用户。）

<select name="example" onchange="setexample()" id="exampleID">
<option value="1">Default Example</option>
<option value="12">User-created Example #2</option>
<option value="8">User-created Example #1</option>
</select>

这是页面周围表单之一的一部分：

<form action="[URL]" method="get">
<input type="hidden" name="exampleform" id="example1" value="">
// Other inputs //
</form>

JavaScript：

<script>
function setexample(){
setexample = document.getElementById("exampleID").options[document.getElementById("exampleID").selectedIndex].value;
document.getElementsByName("exampleform").value = setexample;
}
</script>

我不想使用 jQuery。这只是 JavaScript。

提前谢谢你。

【问题讨论】：

标签： javascript select onchange getelementbyid

【解决方案1】：

在您的代码中：

> function setexample(){
>   setexample = document...

对 setexample 的赋值会覆盖现有值（即函数 setexample）。在函数内部声明变量：

    var setexample = document...

其余的，请参阅 nnnnnn 的回答。

【讨论】：

这个圈子现在已经完成了。 +1。

【解决方案2】：

getElementsByName() 方法返回一个元素列表，因此您不能直接设置属于列表中各个元素的value 属性。您需要遍历列表（它是一个 HTMLCollection，但出于此目的，您可以将其视为一个数组）：

var els = document.getElementsByName("exampleform");
for(var i = 0; i < els.length; i++)
    els[i].value = setexample;

对于其余的，请参阅 RobG 的回答。

【讨论】：

感谢您的帮助。这完美地工作，我不知道它是一个 HTMLCollection/数组。不过，这似乎是合乎逻辑的。

【解决方案3】：

你有这些问题：

您正在覆盖函数的名称，应使用不同名称的局部变量。
当它返回一个数组时，您引用的是单个元素表单 getElementsByName。

试试这个：

<script>
function setexample(){
    var item = document.getElementById("exampleID"); 
    var val = item.options[item.selectedIndex].value;
    var list = document.getElementsByName("exampleform");
    for (var i = 0; i < list.lenth; i++) {
        list[i].value = val;
    }
}
</script>

【讨论】：