我有一个带有 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 函数中执行?
最佳答案
这里的问题是您的 HTML 无效,因为它在多个元素上使用相同的 ID。
来自https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id :“id 全局属性定义了一个唯一标识符(ID),该标识符在整个文档中必须是唯一的。”
当您运行document.getElementById("billing");
时,它仅返回ID为billing
的第一个节点。
考虑使用不同的 ID,或使用类和 getElementsByClassName
或 querySelectorAll
。
关于Javascript 函数仅适用于第一个 FORM,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49746855/