select <select> item by value

问题

i have

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

I want a javascript function that enables me to select and display the <option> as default one by id. In other words, I want to do a setOption(5) and the <option> with the value "5" to be displayed in the combobox as a default .

Is that possible?

回答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 :)

回答2:

If you are using jQuery (1.6 or greater)

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

回答3:

Using Javascript:

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

回答4:

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

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

In Javascript,

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

回答5:

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>

来源：https://stackoverflow.com/questions/4324141/select-select-item-by-value