1

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");
});
mrjayviper
  • 2,258
  • 11
  • 46
  • 82

9 Answers9

5

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>
Aneesh R S
  • 3,807
  • 4
  • 23
  • 35
1

Try this

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

see this is what you are looking for it seems.

Harsh Jaswal
  • 447
  • 3
  • 14
1

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>
Bhargav Chudasama
  • 6,928
  • 5
  • 21
  • 39
1

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>
Milan Chheda
  • 8,159
  • 3
  • 20
  • 35
1

Try this 

$("#rs").on("change", function() {
    alert("rt: "+$("#rt option:first-child").text());
    $('#rt').html($("#rt option:first-child").text());
});
Pang
  • 9,564
  • 146
  • 81
  • 122
Amal Dev
  • 82
  • 7
1
$("#rs").on("change", function() {
    alert("rt: "+$("#rt option:first-child").text());
    $("#rt").val("blank");
});
Hanan Ashraf
  • 518
  • 3
  • 7
  • 21
1

Please try this

$('select>option:eq(0)').prop('selected', true);
Pang
  • 9,564
  • 146
  • 81
  • 122
Vaishali Shinde
  • 552
  • 4
  • 12
1

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>
Neil
  • 14,063
  • 3
  • 30
  • 51
1

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>
Raj
  • 11
  • 4