In my HTML, I have a <select>
with three <option>
elements. I want to use jQuery to check each option's value against a Javascript var
. If one matches, I want to set the selected attribute of that option. How would I do that?
Javascript – Changing the selected option of an HTML Select element
htmljavascriptjquery
Related Topic
- Javascript – Event binding on dynamically created elements
- Javascript – How to know which radio button is selected via jQuery
- Javascript – How to loop through or enumerate a JavaScript object
- Javascript – How to select an element by name with jQuery
- Javascript – What does “use strict” do in JavaScript, and what is the reasoning behind it
- Javascript – How to check if an object is an array?
- Html – How to make a placeholder for a ‘select’ box
- Jquery – Set select option ‘selected’, by value
Best Answer
Vanilla JavaScript
Using plain old JavaScript:
jQuery
But if you really want to use jQuery:
jQuery - Using Value Attributes
In case your options have value attributes which differ from their text content and you want to select via text content:
Demo
But if you do have the above set up and want to select by value using jQuery, you can do as before:
Modern DOM
For the browsers that support
document.querySelector
and theHTMLOptionElement::selected
property, this is a more succinct way of accomplishing this task:Demo
Knockout.js
Demo
Polymer
Demo
Angular 2
Note: this has not been updated for the final stable release.
Demo
Vue 2
Demo