set option “selected” attribute from dynamic created option

Question

I have a dynamically created select option using a javascript function. the select object is

<         


        

Answer 1

Realize this is an old question, but with the newer version of JQuery you can now do the following:

$("option[val=ID]").prop("selected",true);

This accomplishes the same thing as Box9's selected answer in one line.

Answer 2

You could search all the option values until it finds the correct one.

var defaultVal = "Country";
$("#select").find("option").each(function () {

    if ($(this).val() == defaultVal) {

        $(this).prop("selected", "selected");
    }
});

Answer 3

To set value in JavaScript using set attribute , for selected option tag

var newvalue = 10;
var x = document.getElementById("optionid").selectedIndex;
    document.getElementById("optionid")[x].setAttribute('value', newvalue);

Answer 4

The ideas on this page were helpful, yet as ever my scenario was different. So, in modal bootstrap / express node js / aws beanstalk, this worked for me:

var modal = $(this);
modal.find(".modal-body select#cJourney").val(vcJourney).attr("selected","selected");

Where my select ID = "cJourney" and the drop down value was stored in variable: vcJourney

Answer 5

This should work.

$("#country [value='ID']").attr("selected","selected");

If you have function calls bound to the element just follow it with something like

$("#country").change();

Answer 6

Good question. You will need to modify the HTML itself rather than rely on DOM properties.

var opt = $("option[val=ID]"),
    html = $("<div>").append(opt.clone()).html();
html = html.replace(/\>/, ' selected="selected">');
opt.replaceWith(html);

The code grabs the option element for Indonesia, clones it and puts it into a new div (not in the document) to retrieve the full HTML string: <option value="ID">Indonesia</option>.

It then does a string replace to add the attribute selected="selected" as a string, before replacing the original option with this new one.

I tested it on IE7. See it with the reset button working properly here: http://jsfiddle.net/XmW49/