CODEWITHSUNDEEP
jqueryjquery-mobiledrop-down-menu
Daniel Rausch
Daniel Rausch

Reputation: 215

Change jQuery select option programmatically - Doesn't work

I' m trying to remember the descision of an selected option within an jquery select. Unfortunatly, I can't select the wanted option programmatically.

Here are some more Details: The HTML:

<div style="width: 140px">
<label for="select-choice-a" class="select">Lagerort: </label>
<select id="sel_stockIDs">
<option disabled="disabled">Lagerort</option>
</select>
</div>

the JS (All valid options are inserted after an ajax-call).:

for (var j = 0; j < paramsParsed.length; j++) {
   // paramsParsed is {0001, 0002, 0003 etc.}
    loadedStocks[j] = '<option value=' + (j+1) + '>' +  paramsParsed[j] + '</option>';
    $("#sel_stockIDs").append(loadedStocks[j]);
}

also an Listener is set to the select, for storing the users decision JS:

$('#sel_stockIDs').change(function() {
   sessionStorage.setItem("stockId", $('#sel_stockIDs option:selected').text());
});

the "look":

enter image description here

After the user have choosen a valid "Lagerort"-option (stockId), the next HTML-site is opened. The decision (option text and option Value) of the user is saved in the localStorage. When returning to this page, the decision made should be still the selected option. For example, the user selects Lagerort "0001", changes the site and comes back - the selected option should still be "0001". Therefor, I load the stocks again (this works fine)

for (var j = 0; j < paramsParsed.length; j++) {
   // paramsParsed is {0001, 0002, 0003 etc.}
    loadedStocks[j] = '<option value=' + (j+1) + '>' +  paramsParsed[j] + '</option>';
    $("#sel_stockIDs").append(loadedStocks[j]);
}

now i want to set the selected option again. But this doesn't work.... I've tried many different ways and lost around 2 days with this (I guess....) simple problem. Here are my approaches so far (nothing has worked, yet).... for better testing, the wanted option is hard coded (value = 1, text = 0001 = both will link to the first option within the select).

// Function is called, when user re-opens HTML-site 1
function reInsertData() {
    // setting the first option as selected
    // $('#sel_stockIDs option')[1].selected = true;
    // $('#sel_stockIDs option[value=1]')[0].selected = true;
    // $('#sel_stockIDs :nth-child(1)').attr('selected', 'selected');
    // $('#sel_stockIDs option').eq(1).attr('selected', 'selected');
    // $("#sel_stockIDs").val("1");
    // $("#sel_stockIDs").text("0001").attr('selected',true);
    // $("#sel_stockIDs").text("0001").attr('selected','selected');
    // $("#sel_stockIDs").text( "0001" ).prop('selected',true);
    // $("#sel_stockIDs").text( "1" ).prop('selected', selected);
    // $("select option").each(function(){
    //  if ($(this).text() == "0001")
    // This one finds the right option...... but doesn't select it
    //    $(this).attr("selected","selected");
    // });

 }

Inserting some of this approaches within JSFiddle works - but none of the shown code helps within my app. The JS-Versions i'm using are jQuery-mobile-1.3.0 and jQuery-1.9.1.min. I would be very very grateful for any help or some hints!

Upvotes: 5

Views: 9311

Answers (3)

Daniel Rausch
Daniel Rausch

Reputation: 215

Your answer helped me fixing to the problem..... so, inserting 

$("#sel_stockIDs").val('1');

really selected the wanted option.... (in this case the first one; see picture: red border) but unfortunatelly, the select box doesn't noticed this change (see picture: blue border). So the text of the select was still "Lagerort" (which is some kind of placeholder), and not the wanted (and also already selected) value of "0001".

enter image description here

The solution was just to force a change on the select with:

$('#sel_stockIDs').trigger('change');

After this, the value of the slect was also "0001". Thank's for your help and best wishes!

Upvotes: 6

Mark Schultheiss
Mark Schultheiss

Reputation: 34168

Try to only hit the DOM once. For example, create a string with all the options and then append it. Note the quoted value also (not strictly required by the HTML specification but I would recommend it)

var myoptions = '';
var j = 0;
for (j = 0; j < paramsParsed.length; j++) {
    myoptions += '<option value="' + (j + 1) + '">' + paramsParsed[j] + '</option>';
}
$(myoptions).appendTo("#sel_stockIDs");

EDIT: NOW, determine which option to select, you need to do this AFTER THE APPEND:

$("#sel_stockIDs").val('1');

OPTIONALLY, you could set the selected attribute during the option creation (check if (j === 0) for instance, add that selected attribute text.

Upvotes: 1

Igor
Igor

Reputation: 15893

$("#sel_stockIDs").val("1");

is the right way to do it.

Also, you may want to wrap the value attribute value in quotes:

loadedStocks[j] = '<option value="' + (j+1) + '">' +  paramsParsed[j] + '</option>';

Upvotes: 5

Related Questions