CODEWITHSUNDEEP
jqueryhtml
rubberchicken
rubberchicken

Reputation: 1322

reset multiple select option value to zero

I asked a similar question before but with only one select option... this time i have multiple select options with the same id's... is it possible to reset all options to zero?

My Fiddle

my jquery (only works with first select):

$( "#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>

Upvotes: 0

Views: 381

Answers (7)

Milind Anantwar
Milind Anantwar

Reputation: 82241

You should use class selector. id selector select first element in matched selector. also using duplicate id is bad practice. try this:

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

Working Demo

Upvotes: 0

mohamedrias
mohamedrias

Reputation: 18566

You have used $('#overtimehours') which will always return only one node. Avoid using multiple same IDs as IDs must be unique.

instead use

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

Upvotes: 0

Godinall
Godinall

Reputation: 2290

Two things: 1. IDs must be unique 2. You can use class instead

See 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);
});

Upvotes: 1

Felix
Felix

Reputation: 38102

id must be unique, otherwise your selector will always match the first element with that duplicated id, so you need to assign different id value for each select element or remove all the duplicated 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>

then you can use . to target your elements using class instead:

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

Updated Fiddle

Upvotes: 1

D&#233;j&#224; vu
D&#233;j&#224; vu

Reputation: 783

Change the

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

to

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

It's a class and not a ID.

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337580

Use the class as id attributes must be unique:

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

Example fiddle

You will need to remove the duplicates otherwise your HTML will be rendered invalid.

Upvotes: 1

K K
K K

Reputation: 18099

You cannot have same id on multiple elements. Replace it with the class.

Upvotes: 1

Related Questions