Javascript 函数仅适用于第一个 FORM

Question

我有一个带有 JavaScript 函数的表单，用于将 SELECT 下拉值 onchange 复制到输入隐藏字段。

下面是我的代码:

function setBilling(){
    var ddl = document.getElementById("billing");
    var selectedOption = ddl.options[ddl.selectedIndex];
    var mailValue = selectedOption.getAttribute("data-bill");
    var textBox = document.getElementById("billingcycle");
    if(mailValue=="1"){
    	textBox.value = "First";
    }
    else if(mailValue=="2"){
    	textBox.value = "Second";
    }
}

<div class="box1">
<form action="" method="post">
<input type="hidden" name="billingcycle" id="billingcycle"/>
<select id="billing" onchange="setBilling()">
<option data-bill="1" value="INR:1200.00">INR:1200.00/first</option>
<option data-bill="2" value="INR:2400.00">INR:2400.00/second</option>
</select>
<input type="submit" value="Order Now">
</form>
</div>

<hr>

<div class="box2">
<form action="" method="post">
<input type="hidden" name="billingcycle" id="billingcycle"/>
<select id="billing" onchange="setBilling()">
<option data-bill="1" value="INR:1200.00">INR:1200.00/first</option>
<option data-bill="2" value="INR:2400.00">INR:2400.00/second</option>
</select>
<input type="submit" value="Order Now">
</form>
</div>

<hr>

<div class="box3">
<form action="" method="post">
<input type="hidden" name="billingcycle" id="billingcycle"/>
<select id="billing" onchange="setBilling()">
<option data-bill="1" value="INR:1200.00">INR:1200.00/first</option>
<option data-bill="2" value="INR:2400.00">INR:2400.00/second</option>
</select>
<input type="submit" value="Order Now">
</form>
</div>

<hr>

<div class="box4">
<form action="" method="post">
<input type="hidden" name="billingcycle" id="billingcycle"/>
<select id="billing" onchange="setBilling()">
<option data-bill="1" value="INR:1200.00">INR:1200.00/first</option>
<option data-bill="2" value="INR:2400.00">INR:2400.00/second</option>
</select>
<input type="submit" value="Order Now">
</form>
</div>

Javascript 函数适用于第一个 Div，但不适用于剩余的 DIV。我尝试了所有其他 JavaScript 函数，但都不起作用。

如何在所有 div 中的 javascript 函数中执行？

Answer 1

这里的问题是您的 HTML 无效，因为它在多个元素上使用相同的 ID。

来自https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id :“id 全局属性定义了一个唯一标识符(ID)，该标识符在整个文档中必须是唯一的。”

当您运行document.getElementById("billing");时，它仅返回ID为billing的第一个节点。

考虑使用不同的 ID，或使用类和 getElementsByClassName 或 querySelectorAll。