Can't set select option as default

Question

I am trying to set a default option in a select menu from the local storage, I am using a GUID as the value.

<script type="text/javascript">
    $(document).ready(function () {
        var guid = getParameterByName("dashId");

        //$("#cboDashboards").val(guid); - Attempt #1 
        //$("#cboDashboards > option[value=" + guid + "]").prop("selected", true); - Attempt #2
        //jQuery('#cboDashboards > option[value="' + guid + '"]').prop('selected', true) - Attempt #3
    });

    document.getElementById("cboDashboards").onchange = function () {
        localStorage.dashboardGuid = this.value;
        window.location.href = "/Home/Index?dashId=" + this.value;
    };
</script>

The GUID that gets stored is the same as the GUID that I try to populate the combo box with, however, I have tried three different methods of trying to populate the combo box and none have worked. Any suggestions to why this isn't working as expected?

EDIT - Would this method have any effect on it? It's called to populate the combo box with the values:

function populateDashboard(data) {
    var options = $("#cboDashboards");

    $.each(data, function () {
        options.append($("<option />").val(this.DashboardGuid).text(this.Name));
    });
}

I populated some test data -

<select  id="cboDashboards">
    <option value="0">Select dashboard</option>
    <option value="1">Select dashboard 1</option>
    <option value="2">Select dashboard 2</option>
    <option value="3">Select dashboard 3</option>
    @* <option value="0">Select dashboard</option>*@
</select>

and I did :

$("#cboDashboards").val('1'); // - Attempt #1

This worked, so I seem to be having a problem with the GUID value?

I think I found the problem. You are calling selection function before load all options — Ragnar, Sep 23 '14 at 15:13

Ragnar · Accepted Answer · 2014-09-23T15:18:17.923

1

Try with jQuery using this code:

function populateDashboard(data) {
    var options = $("#cboDashboards");

    $.each(data, function () {
        options.append($("<option />").val(this.DashboardGuid).text(this.Name));
    });

    var guid = getParameterByName("dashId");
    //select element
    $('#cboDashboards option[value='+ guid +']').attr('selected', 'selected');
}

I hope this help.

edited Sep 23 '14 at 15:18

answered Sep 23 '14 at 14:45

Ragnar

4,393
1
27
40

Nope, same problem, the first option is still being selected. – Sep 23 '14 at 14:47
try this before select the element: $('#cboDashboards option').removeAttr('selected'); – Ragnar Sep 23 '14 at 14:48
There is a lot of C# code running in the background which is used to populate the combo boxes, I'm wondering if because I am using a GUID, it might be effecting it – Sep 23 '14 at 15:00
Maybe you are missing something. I have created a fiddle and it works http://jsfiddle.net/ujn5mhq3/ – Ragnar Sep 23 '14 at 15:09
Yeah, I made a change to my post, if I have the values manually populated, it works fine, it's just when I automatically populate the values myself – Sep 23 '14 at 15:10
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/61771/discussion-between-jessica-and-ragnar). – Sep 23 '14 at 15:14
Worked perfectly! Cheers :) – Sep 23 '14 at 15:23

Can't set select option as default

1 Answers1