Question

之前我问了一个类似的问题，但只有一个选择选项...这次我有多个具有相同ID的选项...是否可以将所有选项重置为零？

我的jquery（仅适用于第一次选择）：

$( "#reset" ).click(function() {
  $('#overtimehours').val(0);
});

的 HTML：

<select class="overtimehours" id="overtimehours" name="overtimehours[165231]">
<option value="2.75">2.75</option>
<option value="0">0</option>
<option value="0.25">0.25</option>
<option value="0.5">0.5</option>
<option value="5">5</option>
<option value="5.25">5.25</option>
</select>

<select class="overtimehours" id="overtimehours" name="overtimehours[165232]">
<option value="2.75">2.75</option>
<option value="0">0</option>
<option value="0.25">0.25</option>
<option value="0.5">0.5</option>
<option value="5">5</option>
<option value="5.25">5.25</option>
</select>
<input type="button" id="reset" value="reset"></input>

Answer 1

您不能在多个元素上使用相同的ID。将其替换为班级。

Answer 2

使用该类作为id属性必须是唯一的：

$( "#reset" ).click(function() {
  $('.overtimehours').val(0);
});

Example fiddle

您需要删除重复项，否则您的HTML将无效。

Answer 3

更改

$('#overtimehours').val(0);

到

$('.overtimehours').val(0);

这是一个班级而不是ID。

Answer 4

id必须是唯一的，否则您的选择器将始终与重复id的第一个元素匹配，因此您需要为每个id元素分配不同的select值或删除所有重复的id：

<select class="overtimehours" name="overtimehours[16523]">
    <option value="2.75">2.75</option>
    <option value="0">0</option>
    <option value="0.25">0.25</option>
    <option value="0.5">0.5</option>
    <option value="5">5</option>
    <option value="5.25">5.25</option>
</select>
<select class="overtimehours" name="overtimehours[165235]">
    <option value="2.75">2.75</option>
    <option value="0">0</option>
    <option value="0.25">0.25</option>
    <option value="0.5">0.5</option>
    <option value="5">5</option>
    <option value="5.25">5.25</option>
</select>
<select  class="overtimehours" name="overtimehours[165231]">
    <option value="2.75">2.75</option>
    <option value="0">0</option>
    <option value="0.25">0.25</option>
    <option value="0.5">0.5</option>
    <option value="5">5</option>
    <option value="5.25">5.25</option>
</select>
<select class="overtimehours" name="overtimehours[165232]">
    <option value="2.75">2.75</option>
    <option value="0">0</option>
    <option value="0.25">0.25</option>
    <option value="0.5">0.5</option>
    <option value="5">5</option>
    <option value="5.25">5.25</option>
</select>
<input type="button" id="reset" value="reset"></input>

然后您可以使用.来使用类来定位元素：

$("#reset").click(function () {
    $('.overtimehours').val(0);
});

<强> Updated Fiddle

Answer 5

两件事： 1. ID必须是唯一的 2.您可以使用班级

请参阅DEMO HERE

<select class="overtimehours" id="overtimehours1" name="overtimehours[16523]">
<option value="2.75">2.75</option>
<option value="0">0</option>
<option value="0.25">0.25</option>
<option value="0.5">0.5</option>
<option value="5">5</option>
<option value="5.25">5.25</option>
</select>

<select class="overtimehours" id="overtimehours2" name="overtimehours[165235]">
<option value="2.75">2.75</option>
<option value="0">0</option>
<option value="0.25">0.25</option>
<option value="0.5">0.5</option>
<option value="5">5</option>
<option value="5.25">5.25</option>
</select>

<select class="overtimehours" id="overtimehours3" name="overtimehours[165231]">
<option value="2.75">2.75</option>
<option value="0">0</option>
<option value="0.25">0.25</option>
<option value="0.5">0.5</option>
<option value="5">5</option>
<option value="5.25">5.25</option>
</select>

<select class="overtimehours" id="overtimehours4" name="overtimehours[165232]">
<option value="2.75">2.75</option>
<option value="0">0</option>
<option value="0.25">0.25</option>
<option value="0.5">0.5</option>
<option value="5">5</option>
<option value="5.25">5.25</option>
</select>
<input type="button" id="reset" value="reset"></input>


$( "#reset" ).click(function() {
  $('.overtimehours').val(0);
});

Answer 6

您应该使用类选择器。 id selector选择匹配选择器中的第一个元素。也使用重复ID是不好的做法。试试这个：

 $('.overtimehours').val(0);

<强> Working Demo

Answer 7

您使用了$('#overtimehours')，它始终只返回一个节点。避免使用多个相同的ID，因为ID必须是唯一的。

改为使用

 $('.overtimehours').val(0);

将多个选择选项值重置为零

的 HTML：

7 个答案: