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
Show Hide Divs on Click in HTML and CSS Without Jquery
Get Base64 Encode File-Data from Input Form
Will Html5 Allow Web Apps to Make Peer-To-Peer Http Connections
Html 5 Canvas Lineto() Line Color Issues
Html5 Local Storage Fallback Solutions
Set Active Tab Style With Angularjs
Prevent Body from Scrolling When a Modal Is Opened
Set Webkit Keyframes Values Using JavaScript Variable
How to Include CSS and Jquery in My Wordpress Plugin
Execjs::Runtimeerror on Windows Trying to Follow Rubytutorial
How to Display JavaScript Variables in a HTML Page Without Document.Write
Getting Value of HTML Checkbox from Onclick/Onchange Events
Get Local Href Value from Anchor (A) Tag
PHP+Js: How to Do Fileuploads in HTML Form as Content-Type Multipart (Via Js)
Jquery: Why Use Document.Ready If External Js At Bottom of Page
Html5 Canvas Camera/Viewport - How to Actually Do It