Javascript 使用onChange仅工作一次，并使用getElementsByName设置值

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

我想做的是：

用户从表单中选择一个选项。 该选项的值以特定名称放入所有输入中。 用户可以选择另一个选项，该选项的值将替换输入的旧值。 到目前为止，我拥有的代码不起作用： 它不起作用，因为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

提前感谢。

getElementsByName方法返回元素列表，因此不能直接设置属于列表中各个元素的value属性。您需要在列表中循环—它是一个HTMLCollection，但为此，您可以将其视为一个数组：

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

其余内容请参见RobG的答案。

在代码中：

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

对setexample的赋值将覆盖函数setexample的现有值。在函数内声明变量：

    var setexample = document...

其余内容，请参见nnnnnn的答案。

您有以下问题：

您正在覆盖函数的名称，应该使用其他名称的局部变量

当一个元素返回数组时，您引用的是一个元素表单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>

---

圆圈现在完成了+谢谢你的帮助。这非常好用，我不知道这是一个HTMLCollection/array。不过，这似乎合乎逻辑。