select <select> item by value

Question

i have

    hi
    hi 2



        

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

See it!

If it returns false, then the value could not be found :)

Answer 2

You should not need even javascript to get involved, use simply the selected attribute:

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

Answer 3

So I came across this and thought I'd offer a couple of solutions.

The easiest way for a single select, is just to set the value of the select:

var mySelect = document.getElementById( 'my-select-id' );
mySelect.value = 7;

You can also get the selected option by value just the same way:

console.log( mySelect.value );

What I was looking for was a better way to set the values of a multiselect (<select multiple>...</select>) but as it turns out - it seems you have to loop through the options, and set them in some kind of for loop:

function setMultiSelectValues( select, values ) {
    for (var i = 0; i < select.options.length; i++) {
        var option = select.options[i];
        if ( values.includes( option.value ) ) {
            option.selected = true;
        }
    }
}

And then use it like:

var mySelect = document.getElementById( 'my-select-id' );
var myValues = [ 'option-1', 'option-5' ];
setMultiSelect( mySelect , values );

Demo: https://codepen.io/rmorse/pen/QWNymdb

Answer 4

If you are using jQuery (1.6 or greater)

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

Answer 5

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

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

In Javascript,

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

Answer 6

Using Javascript:

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