Change the selected HTML element option

Question

In my HTML, I have a <select> with three <option> elements. I want to use jQuery to test each parameter value in Javascript var . If one of them matches, I want to set the selected attribute of this parameter. How should I do it?

Answer 1

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); }); 

 var val = 'Fish'; $('#btn').on('click', function() { $('#sel').val(val); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select id="sel"> <option>Cat</option> <option>Dog</option> <option>Fish</option> </select> <button id="btn">Select Fish</button> 

jQuery - Using value attributes

If your parameters have value attributes that are different 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 have the above setting and you want to select by value using jQuery, you can do this:

 var val = 3; $('#sel').val(val); 

Modern DOM

For browsers that support document.querySelector and HTMLOptionElement::selected , this is a more concise way to accomplish 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 version.

 <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> 

Demo

Answer 2

None of the examples that use jquery are really right, as they will leave a choice displaying the first record, even if the value has been changed.

The correct way to select Alaska and select, select the item you want, selected with:

 <select id="state"> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> </select> 

With jquery would be:

 $('#state').val('AK').change(); 

Answer 3

Markup

 <select id="my_select"> <option value="1">First</option> <option value="2">Second</option> <option value="3">Third</option> </select> 

JQuery

 var my_value = 2; $('#my_select option').each(function(){ var $this = $(this); // cache this jQuery object to avoid overhead if ($this.val() == my_value) { // if this option value is equal to our value $this.prop('selected', true); // select this option return false; // break the loop, no need to look further } }); 

Demo

Answer 4

Check out this demo.

• Select an option based on its value

   var vals = [2,'c']; $('option').each(function(){ var $t = $(this); for (var n=vals.length; n--; ) if ($t.val() == vals[n]){ $t.prop('selected', true); return; } }); 

• Selecting an option based on its text

   var vals = ['Two','CCC']; // what we're looking for is different $('option').each(function(){ var $t = $(this); for (var n=vals.length; n--; ) if ($t.text() == vals[n]){ // method used is different $t.prop('selected', true); return; } }); 

---

HTML support

 <select> <option value=""></option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <select> <option value=""></option> <option value="a">AAA</option> <option value="b">BBB</option> <option value="c">CCC</option> </select> 

Answer 5

You can select a value using javascript:

 document.getElementById('sel').value = 'bike';​​​​​​​​​​ 

Demo

Answer 6

Great answers - here is the D3 version for those who are watching:

 <select id="sel"> <option>Cat</option> <option>Dog</option> <option>Fish</option> </select> <script> d3.select('#sel').property('value', 'Fish'); </script> 

Answer 7

I want to change the selected element of the selected value of both value and textContent (what we see) to "Mango".

Simple code that worked below:

 var newValue1 = 'Mango' var selectElement = document.getElementById('myselectid'); selectElement.options[selectElement.selectedIndex].value = newValue1; selectElement.options[selectElement.selectedIndex].textContent = newValue1; 

Hope this helps someone. Good luck.
If it helped you.

Answer 8

I used almost all the answers posted here, but not happy with it, so I dig one step and find an easy solution that fits my needs and feel worthy to share with you guys. Instead of iterating over all parameters or using jQuery, you can do it using the JS kernel in simple steps:

Example

 <select id="org_list"> <option value="23">IBM</option> <option value="33">DELL</option> <option value="25">SONY</option> <option value="29">HP</option> </select> 

So you should know the value of the option to select.

 function selectOrganization(id){ org_list=document.getElementById('org_list'); org_list.selectedIndex=org_list.querySelector('option[value="'+id+'"]').index; } 

How to use?

 selectOrganization(25); //this will select SONY from option List 

Your comments are welcome. :) AzmatHunzai.

Answer 9

After a lot of searching, I tried @kzh in the selection list, where I only know the option attribute inner text not value , this code based on the choice of answer, I used it to change the selection option according to the current url page in this format http://www.example.com/index.php?u=Steve

 <select id="sel"> <option>Joe</option> <option>Steve</option> <option>Jack</option> </select> <script> var val = window.location.href.split('u=')[1]; // to filter ?u= query var sel = document.getElementById('sel'); var opts = sel.options; for(var opt, j = 0; opt = opts[j]; j++) { // search are based on text inside option Attr if(opt.text == val) { sel.selectedIndex = j; break; } } </script> 

This will save the url parameters shown as selected to make it more user friendly, and the visitor knows which page or profile he is currently viewing.

Answer 10

I used this after updating the register and changed the request state via ajax, then executed the request with the new state in the same script and put it in the new state of the select tag element to update the view.

 var objSel = document.getElementById("selectObj"); objSel.selectedIndex = elementSelected; 

Hope this is helpful.

Answer 11

A slightly neat version of Vanilla.JS. Assuming you already installed nodeList missing .forEach() :

 NodeList.prototype.forEach = Array.prototype.forEach 

Simply:

 var requiredValue = 'i-50332a31', selectBox = document.querySelector('select') selectBox.childNodes.forEach(function(element, index){ if ( element.value === requiredValue ) { selectBox.selectedIndex = index } })