How to set selected dropdown option using jquery in a form with multiple selects?

Question

I have form with some text inputs and dropdown menus. This elements are generated dynamically based on the user selection in the previous page and this dynamic generation of elements are working fine. Now, let's say my code looks like this -

<form id="myForm" >
<select id='id1'>
<option value="">Select an option</option>  
<option value="opt1">opt1</option>  
<option value="opt2">opt2</option>  
<option value="opt3">opt3</option>  
</select>  
<select id='id2'>  
    <option value="">Select an option</option>  
    <option value="Apple">Apple</option>  
    <option value="Orange">Orange</option>  
    <option value="Grape">Grape</option>  
   </select>  
</form>

and now i wanted to reset the option of all the dropdown menu item to the first i.e. - "Select an option" when user clicks on reset button.

<button class="reset-field" id="clearBtn">Reset</button>

For this i tried-

$(document).ready(function(){
 ...
  $("#clearBtn").click(function(){
  $('#myForm select').each(function(key, value) {
   $(this).val("");
  });
 });
});

Basically this sets the value to "" but not the the option. I mean selected item is not getting changed. Any idea how we can set the option to - "Select an option".

Thanks.

This should work fine.. jsfiddle.net/6ewLN

Rajaprabhu Aravindasamy
– Rajaprabhu Aravindasamy

2014-06-26 17:38:38 +00:00
Commented Jun 26, 2014 at 17:38 — Rajaprabhu Aravindasamy
– Rajaprabhu Aravindasamy, Commented Jun 26, 2014 at 17:38

Ken Dickinson · Accepted Answer · 2014-06-26 17:46:27Z

1

$(this)[0].selectedIndex = 0;

Using the array selector on the jQuery element will return a pointer to the actual DOM based object (not the jQuery wrapped object). From there, you can just set selectedIndex to 0 (the 0th element in the list).

answered Jun 26, 2014 at 17:46

Ken Dickinson

4053 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rajaprabhu Aravindasamy Over a year ago

Err.. Then why did OP's code not work..? $('select').val("")

Michael Over a year ago

Or just this.selectedIndex = 0;

Ken Dickinson Over a year ago

Michael's comment was correct. just use this.selectedIndex. Missed that one < duh />

Rajaprabhu Aravindasamy · Accepted Answer · 2014-06-26 17:56:33Z

1

Try using .text("") instead of .val("")

$(document).ready(function(){
 ...
  $("#clearBtn").click(function(){
  $('#myForm select').each(function(key, value) {
   $(this).text("");
  });
 });
});

edited Jun 26, 2014 at 17:56

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

answered Jun 26, 2014 at 17:38

Mark

4,8718 gold badges58 silver badges93 bronze badges

2 Comments

Mark Over a year ago

Then replace with .text("Select an option");

net user Over a year ago

by doing this all other options will be removed only "Select an option" would be retained in the dropdown list which is not i am trying to do.

c-smile · Accepted Answer · 2014-06-26 18:04:46Z

0

(Not an answer strictly speaking, just a thought)

val() concept in jQuery is quite rudimentary.

Check this discussion where I am proposing the formation mechanism. With it your task can be accomplished as

$("#myForm").formation().value = { id1:"", id2:"" };

Essentially, the formation introduces value of the form as name/value collection of its inputs. It correctly handles values of selects, radio groups and checkboxes.

answered Jun 26, 2014 at 18:04

c-smile

27.6k8 gold badges66 silver badges91 bronze badges

Comments

Mark · Accepted Answer · 2014-06-26 19:56:10Z

0

I think this is what you are looking for:

http://jsfiddle.net/YZWTY/

$(function(){
        $("#clearBtn").click(function(e){
         e.preventDefault();
            $("#myForm select option").each(function(){
               var a = $(this).index();
               $(this).val(a);   
              });
            $("#myForm select").val("0");
        });
});

answered Jun 26, 2014 at 19:56

Mark

4,8718 gold badges58 silver badges93 bronze badges

Collectives™ on Stack Overflow

How to set selected dropdown option using jquery in a form with multiple selects?

4 Answers 4

3 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related