Select <select> item by value

Question

I have

<select id="x"> <option value="5">hi</option> <option value="7">hi 2</option> </select> 

I need a javascript function that allows me to select and display the default <option> by id. In other words, I want to make setOption(5) and <option> with the value "5", which will be displayed in the default combo box.

Is it possible?

Answer 1

If you can, with ES6 ...

 function setOption(selectElement, value) { return [...selectElement.options].some((option, index) => { if (option.value == value) { selectElement.selectedIndex = index; return true; } }); } 

... otherwise...

 function setOption(selectElement, value) { var options = selectElement.options; for (var i = 0, optionsLength = options.length; i < optionsLength; i++) { if (options[i].value == value) { selectElement.selectedIndex = i; return true; } } return false; } setOption(document.getElementById('my-select'), 'b'); 

Take a look!

If it returns false , then this value cannot be found :)

Answer 2

Using Javascript:

 document.getElementById('drpSelectSourceLibrary').value = 'Seven'; 

Answer 3

If you are using jQuery (1.6 or higher)

 $('#x option[value="5"]').prop('selected', true) 

Answer 4

If someone is looking for a jquery solution, use the val() function.

 $("#select").val(valueToBeSelected); 

In javascript

 document.getElementById("select").value = valueToBeSelected; 

Answer 5

You don't even need to use javascript, just use the selected attribute:

 <select id="x"> <option value="5" selected>hi</option> <option value="7">hi 2</option> </select>