Set select option 'selected', by value

Question

I have a select field with some options in it. Now I need to select one of those options with jQuery. But how can I do that when I only know the

Answer 1

There seems to be an issue with select drop down controls not dynamically changing when the controls are dynamically created instead of being in a static HTML page.

In jQuery this solution worked for me.

$('#editAddMake').val(result.data.make_id);
$('#editAddMake').selectmenu('refresh');

Just as an addendum the first line of code without the second line, did actually work transparently in that, retrieving the selected index was correct after setting the index and if you actually clicked the control it would show the correct item but this didn't reflect in the top label of the control.

Hope this helps.

Answer 2

Source Link

Use val() jQuery Method for Single and Multiple Value Selection in DropDown

    $(function () {

        $("button").click(function () {
            $("#myDropDownSingle").val('5');
            $("#myDropDownMultiple").val(['5', '4', '8']);
        });

    });

HTML

<p>
    <h5>Single Selection</h5>
    <select id="myDropDownSingle" class="form-control">
        <option value="0">Select Value 0</option>
        <option value="8">Option value 8</option>
        <option value="5">Option value 5</option>
        <option value="4">Option value 4</option>
    </select>
</p>
<p>
    <h5>Multiple Selection</h5>
    <select id="myDropDownMultiple" class="form-control" multiple>
        <option value="0">Select Value 0</option>
        <option value="8">Option value 8</option>
        <option value="5">Option value 5</option>
        <option value="4">Option value 4</option>
    </select>
</p>

<p>
    <button>Get Value and Text on Button Click</button>
</p>

Answer 3

Is old post but here is one simple function what act like jQuery plugin.

    $.fn.selectOption = function(val){
        this.val(val)
        .find('option')
        .removeAttr('selected')
        .parent()
        .find('option[value="'+ val +'"]')
        .attr('selected', 'selected')
        .parent()
        .trigger('change');

        return this;
    };

You just simple can do something like this:

$('.id_100').selectOption('val2');

Reson why use this is because you change selected satemant into DOM what is crossbrowser supported and also will trigger change to you can catch it.

Is basicaly human action simulation.

Answer 4

There's an easier way that doesn't require you to go into the options tag:

$("div.id_100 select").val("val2");

Check out the this jQuery method.

Answer 5

There's no reason to overthink this, all you are doing is accessing and setting a property. That's it.

Okay, so some basic dom: If you were doing this in straight JavaScript, it you would this:

window.document.getElementById('my_stuff').selectedIndex = 4;

But you're not doing it with straight JavaScript, you're doing it with jQuery. And in jQuery, you want to use the .prop() function to set a property, so you would do it like this:

$("#my_stuff").prop('selectedIndex', 4);

Anyway, just make sure your id is unique. Otherwise, you'll be banging your head on the wall wondering why this didn't work.

Answer 6

You can achieve this with different methods:
(remember if an element is to be operated, better give it an id or class, rather than having it's parent element an id or class).
Here, As the div has a class to target the select inside it, code will be:

$("div.id_100 select").val("val2");

or

$('div.id_100  option[value="val2"]').prop("selected", true);

If the class would have been given to select itself, code will be:

$(".id_100").val("val2");

or

$('.id_100 option[value=val2]').attr('selected','selected');

or

$('.id_100 option')
    .removeAttr('selected')
    .filter('[value=val1]')
    .attr('selected', true);

To pass the value dynamically, code will be:
valu="val2";

$("div.id_100 select").val(valu);
$("div.id_100 > select > option[value=" + valu + "]").prop("selected",true);

If element is added through ajax, You will have to give 'id' to your element and use
window.document.getElementById else You will have to give 'class' to your element and use
window.document.getElementById

You can also select value of select element by it's index number.
If you have given ID to your select element, code will be:

window.document.getElementById('select_element').selectedIndex = 4;

Remember when you change the select value as said above, change method is not called.
i.e. if you have written code to do some stuff on change of select the above methods will change the select value but will not trigger the change.
for to trigger the change function you have to add .change() at the end. so the code will be:

$("#select_id").val("val2").change();