How to set selected value in jquery

Question

here is my select element:

function retrieveProjects() {
    var returnValue = "";

    // some code...

    if (result.Passed) {
        var options = "";
        for (var a = 0; a < result.Projects.length; a++){
            options += "<option value=\"" + result.Projects[a].Id + "\">" + result.Projects[a].PRJ_Name + "</option>";
        }
        returnValue = options;
        debugger;
    }
});

return returnValue;
}

$("#ddmoduleid").empty().append(retrieveProjects());

My itembox filled fine. but it seems empty first load when I click all items listed. I want first element become selected on list

Can you help me

try `$("#ddmoduleid").empty().append(retrieveProjects()).val(function(){ return $(this).find('option:first').val() });` — Arun P Johny, Nov 06 '13 at 09:49

score 0 · Answer 1 · answered Nov 06 '13 at 09:50

0

Change the following line (to this):

options += "<option value=\"" + result.Projects[a].Id + "\"" + ((!a) ? ' selected' : '') + ">" + result.Projects[a].PRJ_Name + "</option>";

answered Nov 06 '13 at 09:50

sjkm

3,887
2
25
43

I guess you meant `selected` and not `checked` ? – Clyde Lobo Nov 06 '13 at 09:52

Clyde Lobo · Answer 2 · 2013-11-06T11:20:01.720

0

if (result.Passed) {
    var options = "";
    options += "<option value=\"" + result.Projects[0].Id + " selected='selected'\">" + result.Projects[0].PRJ_Name + "</option>";
    for (var a = 1; a < result.Projects.length; a++){
        options += "<option value=\"" + result.Projects[a].Id + "\">" + result.Projects[a].PRJ_Name + "</option>";
    }
    returnValue = options;
    debugger;
}

edited Nov 06 '13 at 11:20

answered Nov 06 '13 at 09:51

Clyde Lobo

9,126
7
34
61

bro I did it and I can see selected element is done but still cant seem in first load. I see in chrome debugg, option value ="1" selected="selected" but my problem is different I think.. – TyForHelpDude Nov 06 '13 at 11:13

nrsharma · Answer 3 · 2013-11-06T11:40:14.713

0

After Filling the select element with options you can try to set the value like this

make the value of first element as '0' or what you want and then set it with .val()

$("#ddmoduleid").val('0');

Or you can also try this

$("#ddmoduleid option:first").attr('selected', true);

Or you can use .prop()

$("#ddmoduleid option:first").prop('selected', true);

UPDATE

First make the list empty and assign a default value like this

$("#ddmoduleid").get(0).options.length = 0;
$("#ddmoduleid").get(0).options[0] = new Option("Default value", "0");

For Filling the options in select element use this

 $.each(result.Projects, function (index, item) {
    $("#ddmoduleid ").get(0).options[$("#ddmoduleid ").get(0).options.length] = new Option(item.Text, item.Value);
 });

and after filling the select element use this

$("#ddmoduleid option:first").prop('selected', true);

edited Nov 06 '13 at 11:40

answered Nov 06 '13 at 09:53

nrsharma

2,532
3
20
36

Use `prop` to modify properties, rather than `attr`. – Reinstate Monica Cellio Nov 06 '13 at 09:56
It's actually nothing to do with what you want the code to look like - there are legitimate reasons for using `prop`. It mostly comes down to what version of jQuery you are using, but read this... http://stackoverflow.com/questions/5874652/prop-vs-attr – Reinstate Monica Cellio Nov 06 '13 at 09:58
nrsharma thank you I did what you tell me and when I debug ın chrome I can see selected element is done but still cant seem in first load.. I see in chrome option value ="1" selected="selected" but my problem is different I think.. – TyForHelpDude Nov 06 '13 at 11:12
@TyForHelpDude - See my updated answer.. may this will solve your issue :) – nrsharma Nov 06 '13 at 11:41

How to set selected value in jquery

3 Answers3