select <select> item by value

Question

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?

Salchunas

And what have you tried? – Zaria

you shouldn't need even javascript for this. Is there any reason you need to have in done on the client side? – Ancohuma

@Ancohuma - Why not? I can think of several reasons this can be useful. BTW, if jQuery is an option, it's as simple as $('#x').val('5');. – Protagoras

@Protagoras clearly there might be reasons for that, but if there aren't then why not drop javascript from the solution? It just wasn't that clear from the question (for me) that javascript is really that important to have. – Ancohuma

Refer this article : javascriptstutorial.com/blog/… – Mobility

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

Occupier

Thanks , Little fix for (var i = 0; i < options.length; i++) – Salchunas

@Ronan Dejhero That fix isn't necessary ? – Occupier

@Ronan Dejhero It will access the length property for every iteration though :) – Occupier

optionsLength = options.length; outside the loop , then use optionsLength inside the loop – Salchunas

Can it be done without using i-like indexes? via forEach somehow? – Movie

@Movie Yep, but you'd need to use something like [].forEach.call() as the options is a NodeList, I'd imagine. – Occupier

Answer 2

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

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

In Javascript,

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

Mucus

Answer 3

If you are using jQuery (1.6 or greater)

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

Cartagena

When I try $('#x option[value="5"]') in js-console with my value (visible from inspecting the element), it does not find the option. If I use $('#x'), it does. All using my page's element ID, of course. – Imtiaz

I replied to the question, the original question asked "select <select> item by value" What you are trying to do is something else. and thanks for the down vote for a correct answer :D – Cartagena

sorry for the misunderstand :) down vote and your comment both come at once, that's why I made a wrong calculation :) – Cartagena

Answer 4

Using Javascript:

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

Mobility

Answer 5

vanilla JS:

Get index of search value

var index=[...document.getElementByID('name').options].find(o=>o.value==5).index

Set it:

document.getElementByID('name').selectedIndex=index;

Ruthy

Answer 6

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

Quadriga

Answer 7

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>

Ancohuma

Actually i asked for a javascript code to be able to edit the object that has that "selected" attrib – Salchunas

@Ronan, yeah; but that's the point @Ancohuma was making: unless this is being done in response to user-actions on the client-side there's little reason to use a JavaScript function to achieve this. – Zaria