Vanilla JavaScript
Using plain old JavaScript:
var val = "Fish"; var sel = document.getElementById('sel'); document.getElementById('btn').onclick = function() { var opts = sel.options; for (var opt, j = 0; opt = opts[j]; j++) { if (opt.value == val) { sel.selectedIndex = j; break; } } }
<select id="sel"> <option>Cat</option> <option>Dog</option> <option>Fish</option> </select> <button id="btn">Select Fish</button>
jQuery
But if you really want to use jQuery:
var val = 'Fish'; $('#btn').on('click', function() { $('#sel').val(val); });
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:
<select id="sel"> <option value="1">Cat</option> <option value="2">Dog</option> <option value="3">Fish</option> </select> <script> var val = 'Fish'; $('#sel option:contains(' + val + ')').prop({selected: true}); </script>
Demo
But if you do have the above set up and want to select by value using jQuery, you can do as before:
var val = 3; $('#sel').val(val);
Modern DOM
For the browsers that support document.querySelector
and the HTMLOptionElement::selected
property, this is a more succinct way of accomplishing this task:
var val = 3; document.querySelector('#sel [value="' + val + '"]').selected = true;
Demo
Knockout.js
<select data-bind="value: val"> <option value="1">Cat</option> <option value="2">Dog</option> <option value="3">Fish</option> </select> <script> var viewModel = { val: ko.observable() }; ko.applyBindings(viewModel); viewModel.val(3); </script>
Demo
Polymer
<template id="template" is="dom-bind"> <select value="{{ val }}"> <option value="1">Cat</option> <option value="2">Dog</option> <option value="3">Fish</option> </select> </template> <script> template.val = 3; </script>
Demo
Angular 2
Note: this has not been updated for the final stable release.
<app id="app"> <select [value]="val"> <option value="1">Cat</option> <option value="2">Dog</option> <option value="3">Fish</option> </select> </app> <script> var App = ng.Component({selector: 'app'}) .View({template: app.innerHTML}) .Class({constructor: function() {}}); ng.bootstrap(App).then(function(app) { app._hostComponent.instance.val = 3; }); </script>
Demo
Vue 2
<div id="app"> <select v-model="val"> <option value="1">Cat</option> <option value="2">Dog</option> <option value="3">Fish</option> </select> </div> <script> var app = new Vue({ el: '#app', data: { val: null, }, mounted: function() { this.val = 3; } }); </script>