更改具有相同类的所有元素的值不起作用。

Question

问题是我想更改所有具有相同类的元素。这里是一个例子：

<select class="dntselect"  onchange="go(this); return false;">
    <option value="1">test1</option>
    <option value="2">test2</option>
    <option value="3">test3</option>
    <option value="4">test4</option>
</select>

<form>
    <input type="hidden" class="ppselect" name="item_name" value="XXX">
</form>

<form>
    <input type="hidden" class="ppselect" name="item_name" value="XXX">
</form>

<form>
    <input type="hidden" class="ppselect" name="item_name" value="XXX">
</form>

我想用选定的选项替换输入中的“XXX”值。例如，将“XXX”值替换为“test1”。

我尝试了一些教程和自己的工作，但都不起作用。我无法弄清楚如何做到这一点。

<script>
    function go(x) {
        var elements = document.getElementsByClassName('ppselect').value;
        for (var i = 0; i < elements.length; i++) {
            elements[i].x.options[x.selectedIndex].text;
        }
    }
</script>

这并不是重复 - 因为我受到了这些“重复”的启发，但我无法弄清楚如何在这种情况下实现。

- user9817924

---

IDs必须是唯一的。您正在使用getElementsByClassName，它应该与类一起使用，但您的输入框上没有类。 - j08691

抱歉，原始代码中的类已被编辑。 - user9817924

可能是What do querySelectorAll, getElementsByClassName and other getElementsBy* methods return?的重复问题。 - Heretic Monkey

是的，我用过那些教程，但我无法解决我的问题。因为我几乎没有js编程经验。 - user9817924

这里还有一个有趣的链接 https://dev59.com/JmAf5IYBdhLWcg3wo0Bn 请注意。 - Mark Schultheiss

Answer 1

让我们忽略您使用多个<form>元素的情况，因为在这种情况下使用type=hidden就没有意义，就像想要查看正在发生的事情一样。

所以回答这个问题。为什么不使用具有document.querySelectorAll()和.forEach()选项的方法如下：

function go(x) {
    var text = x.options[x.selectedIndex].text;
    var elements = document.querySelectorAll('.ppselect');
    elements.forEach(function(element){
        element.value = text;
    });
};

<select class="dntselect"  onchange="go(this); return false;">
  <option value="1">test1</option>
  <option value="2">test2</option>
  <option value="3">test3</option>
  <option value="4">test4</option>
</select>

<input type="text" class="ppselect" name="item_name" value="XXX">
<input type="text" class="ppselect" name="item_name" value="XXX">

<input type="text" class="ppselect" name="item_name" value="XXX">

与使用 Document.getElementsByClassName() 并编写 for 循环 几乎相同，建议使用这种方法。

function go(x) {
    var text = x.options[x.selectedIndex].text;
    var elements = document.getElementsByClassName('ppselect');
    for(var i=0; i < elements.length; i++){
        elements[i].value = text;
    }
};

<select class="dntselect"  onchange="go(this); return false;">
  <option value="1">test1</option>
  <option value="2">test2</option>
  <option value="3">test3</option>
  <option value="4">test4</option>
</select>

<input type="text" class="ppselect" name="item_name" value="XXX">
<input type="text" class="ppselect" name="item_name" value="XXX">

<input type="text" class="ppselect" name="item_name" value="XXX">

- caramba

Answer 2

我不太理解你的脚本，也许你想使用类(class)而不是重复并无效的id。

我稍微修改了你的函数使其能够工作，但实际上这仍然对我来说没有多少意义（将所有隐藏元素的值设置为选择）。

function go(x) {
  var el = document.getElementsByClassName('ppselect');
  for (var i = 0; i < el.length; i++) {
    el[i].value = x.options[x.selectedIndex].innerText;
  }
}

<select class="dntselect" onchange="go(this); return false;">
  <option value="1">test1</option>
  <option value="2">test2</option>
  <option value="3">test3</option>
  <option value="4">test4</option>
</select>

<form>
  <input type="hidden" class="ppselect" name="item_name" value="XXX">
</form>

<form>
  <input type="hidden" class="ppselect" name="item_name" value="XXX">
</form>

<form>
  <input type="hidden" class="ppselect" name="item_name" value="XXX">
</form>

- Mark Schultheiss

---

注意：3个隐藏的表单？这对我来说也很奇怪。 - Mark Schultheiss

Answer 3

这是因为 document.getElementsByClassName('ppselect').value 是 undefined

你的函数应该是

function go(x)
{
var elements = document.getElementsByClassName('ppselect'); 
for (var i = 0; i < elements.length; i++) {
        elements[i].value=x.options[x.selectedIndex].innerHTML;
    }
}

- guigoz