CODEWITHSUNDEEP
jquery
mrjayviper
mrjayviper

Reputation: 2388

How to auto-select the first option in a dropdown list using jquery?

I'm having trouble auto-selecting the first option in a dropdown list.

I've tried using attr and val function (see this jdfiddle link for an example) and it just wouldn't work. As a a test, my example has an alert code that displays the .text() for the first option and this works fine. So my selector is working.

Thanks a lot!

sample HTML code:

<select id="rt" name="rt" style="width: 300px;">
  <option value="blank" selected="selected">- Select a fruit -</option>
  <option value="20270">Apple</option>
  <option value="20271">Banana</option>
  <option value="20273">Grapes</option>
</select>
<br>
<select id="rs" name="rs" style="width: 300px;">
  <option value="blank" selected="selected">- Select a car -</option>
  <option value="20226">Toyota</option>
  <option value="20227">Chevy</option>
  <option value="20228">Mazda</option>
</select>

sample JS code:

$("#rs").on("change", function() {
    alert("rt: "+$("#rt option:first-child").text());
    $("#rt option:first-child").attr("selected", "selected");
    //$("#rt option:first-child").val("blank");
});

Upvotes: 1

Views: 16388

Answers (9)

Raj
Raj

Reputation: 11

Please try this

<script>
   $(document).ready(function(){
       $("#rs").val($("#rs option:first").val());
   });
</script>
<select id="rs" name="rs">
   <option value="20226">Toyota</option>
   <option value="20227">Chevy</option>
   <option value="20228">Mazda</option>
</select>

Upvotes: 1

Vaishali Shinde
Vaishali Shinde

Reputation: 552

Please try this

$('select>option:eq(0)').prop('selected', true);

Upvotes: 1

Amal Dev
Amal Dev

Reputation: 84

Try this 

$("#rs").on("change", function() {
    alert("rt: "+$("#rt option:first-child").text());
    $('#rt').html($("#rt option:first-child").text());
});

Upvotes: 1

Aneesh R S
Aneesh R S

Reputation: 3827

Use selector val method to set the value

$("#rs").on("change", function() {
    alert("rt: "+$("#rt option:first-child").text());
    $("#rt").val($("#rt option:first-child").attr("value"));    
});

or simply

$("#rs").on("change", function() {       
    $("#rt").val($("#rt option:first").val());    
});

The below snippet will do what exactly you want

$("#rs").on("change", function() {
    $("#rt").val($("#rt option:first").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="rt" name="rt" style="width: 300px;">
  <option value="blank" selected="selected">- Select a fruit -</option>
  <option value="20270">Apple</option>
  <option value="20271">Banana</option>
  <option value="20273">Grapes</option>
</select>
<br>
<select id="rs" name="rs" style="width: 300px;">
  <option value="blank" selected="selected">- Select a car -</option>
  <option value="20226">Toyota</option>
  <option value="20227">Chevy</option>
  <option value="20228">Mazda</option>
</select>

Upvotes: 5

Neil
Neil

Reputation: 14313

The following code will select the first element of the #rs after you select one from rt. I believe this is what you want. I suspect the names are mixed up (as most forms go from top to bottom). If you desire the reverse, just comment.

$("#rt").on("change", function() {
	$('#rs').find('option:eq(1)').prop('selected', true)
});
<select id="rt" name="rt" style="width: 300px;">
  <option value="blank" selected="selected">- Select a fruit -</option>
  <option value="20270">Apple</option>
  <option value="20271">Banana</option>
  <option value="20273">Grapes</option>
</select>
<br>
<select id="rs" name="rs" style="width: 300px;">
  <option value="blank" selected="selected">- Select a car -</option>
  <option value="20226">Toyota</option>
  <option value="20227">Chevy</option>
  <option value="20228">Mazda</option>
</select>

Upvotes: 1

Hanan Ashraf
Hanan Ashraf

Reputation: 518

$("#rs").on("change", function() {
    alert("rt: "+$("#rt option:first-child").text());
    $("#rt").val("blank");
});

Upvotes: 1

Milan Chheda
Milan Chheda

Reputation: 8249

Instead of first-child, you need to use eq().

Below code will always auto-select first fruit whenever you select any car from the dropdown: 

$("#rs").on("change", function() {
  $("#rt option:eq(1)").prop("selected", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="rt" name="rt" style="width: 300px;">
  <option value="blank" selected="selected">- Select a fruit -</option>
  <option value="20270">Apple</option>
  <option value="20271">Banana</option>
  <option value="20273">Grapes</option>
</select>
<br>
<select id="rs" name="rs" style="width: 300px;">
  <option value="blank" selected="selected">- Select a car -</option>
  <option value="20226">Toyota</option>
  <option value="20227">Chevy</option>
  <option value="20228">Mazda</option>
</select>

Upvotes: 1

Bhargav Chudasama
Bhargav Chudasama

Reputation: 7161

try with $('select[name=rt] option:eq(2)').attr('selected', 'selected'); second option to select because first option - Select a fruit - is default selected so no any change in select

and if you select first option so use option:eq(1)

$(document).ready(function() {
  $("select#rs").on("change", function() {
    //$("#rt option:first-child").attr("selected", "selected");
    $('select[name=rt] option:eq(2)').attr('selected', 'selected');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="rt" name="rt" style="width: 300px;">
  <option value="blank" selected="selected">- Select a fruit -</option>
  <option value="20270">Apple</option>
  <option value="20271">Banana</option>
  <option value="20273">Grapes</option>
</select>
<br>
<select id="rs" name="rs" style="width: 300px;">
  <option value="blank" selected="selected">- Select a car -</option>
  <option value="20226">Toyota</option>
  <option value="20227">Chevy</option>
  <option value="20228">Mazda</option>
</select>

Upvotes: 1

Harsh Jaswal
Harsh Jaswal

Reputation: 447

Try this

$('select>option:eq(1)').prop('selected', true);

see this is what you are looking for it seems.

Upvotes: 1

Related Questions