Change jQuery select option programmatically - Doesn't work

Question

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":

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!

Answer 1

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".

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!