Question

我在页面上有各种表单，页面顶部有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。

提前谢谢。

Answer 1

在您的代码中：

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

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

    var setexample = document...

其他的，请参阅nnnnnn的答案。

Answer 2

getElementsByName()方法返回元素列表，因此您不能直接设置属于列表中各个元素的value属性。你需要循环遍历列表（这是一个HTMLCollection，但为了这个目的，你可以像对待数组一样对待它）：

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

其他的，请参阅RobG的回答。

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

<select> onChange仅工作一次，并使用getElementsByName </select>设置值

3 个答案: