How to Use Jquery to Select a Dropdown Option

How to use jQuery to select a dropdown option?

How about

$('select>option:eq(3)').attr('selected', true);

Example:

$('select>option:eq(3)').attr('selected', true);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

Adding options to a <select> using jQuery?

This did NOT work in IE8 (yet did in FF):

$("#selectList").append(new Option("option text", "value"));

This DID work:

var o = new Option("option text", "value");
/// jquerify the DOM object 'o' so we can use the html method
$(o).html("option text");
$("#selectList").append(o);

JQuery - how to select dropdown item based on value

You should use

$('#dropdownid').val('selectedvalue');

Here's an example:

$('#dropdownid').val('selectedvalue');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='dropdownid'>
<option value=''>- Please choose -</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='selectedvalue'>There we go!</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
</select>

How to set the 'selected option' of a select dropdown list with jquery

Try this :

$('select[name^="salesrep"] option[value="Bruce Jones"]').attr("selected","selected");

Just replace option[value="Bruce Jones"] by option[value=result[0]]

And before selecting a new option, you might want to "unselect" the previous :

$('select[name^="salesrep"] option:selected').attr("selected",null);

You may want to read this too : jQuery get specific option tag text

Edit: Using jQuery Mobile, this link may provide a good solution : jquery mobile - set select/option values

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

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>

jQuery Get Selected Option From Dropdown

For dropdown options you probably want something like this:

var conceptName = $('#aioConceptName').find(":selected").text();

The reason val() doesn't do the trick is because clicking an option doesn't change the value of the dropdown--it just adds the :selected property to the selected option which is a child of the dropdown.

How can I set the value of a DropDownList using jQuery?

$("#mydropdownlist").val("thevalue");

just make sure the value in the options tags matches the value in the val method.

How do you select a particular option in a SELECT element in jQuery?

A selector to get the middle option-element by value is

$('.selDiv option[value="SEL1"]')

For an index:

$('.selDiv option:eq(1)')

For a known text:

$('.selDiv option:contains("Selection 1")')

EDIT: As commented above the OP might have been after changing the selected item of the dropdown. In version 1.6 and higher the prop() method is recommended:

$('.selDiv option:eq(1)').prop('selected', true)

In older versions:

$('.selDiv option:eq(1)').attr('selected', 'selected')

EDIT2: after Ryan's comment. A match on "Selection 10" might be unwanted. I found no selector to match the full text, but a filter works:

 $('.selDiv option')
.filter(function(i, e) { return $(e).text() == "Selection 1"})

EDIT3: Use caution with $(e).text() as it can contain a newline making the comparison fail. This happens when the options are implicitly closed (no </option> tag):

<select ...>
<option value="1">Selection 1
<option value="2">Selection 2
:
</select>

If you simply use e.text any extra whitespace like the trailing newline will be removed, making the comparison more robust.



Related Topics



Leave a reply



Submit