Change jQuery selection option programmatically - not working

Question

I am trying to recall the resolution of the selected parameter in jquery select. Unfortunately, I cannot programmatically select the desired option.

Here are some more details: 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> 

JS (all valid parameters 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]); } 

Listener is also installed to choose from, for storing solutions for JS users:

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

"look":

After the user selects a valid "Lagerort" -option (stockId), the following HTML site will open. The solution (option text and parameter value) of the user is stored in localStorage. When you return to this page, the solution should still be selected. For example, the user selects Lagerort "0001", changes the site and returns - the selected parameter should still be "0001". So I upload stocks again (this works great)

 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 does not work ... I tried many different ways and lost about 2 days with this (I think ....) simple problem. Here are my approaches so far (nothing worked) ... for better testing, the desired option is hardcoded (value = 1, text = 0001 = both will refer to the first option within the selection).

 // 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 these approaches into JSFiddle works, but none of the code shown helps in my application. The JS Versions I'm using are jQuery-mobile-1.3.0 and jQuery-1.9.1.min. I would really appreciate any help or tips!

Answer 1

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

is the right way to do this.

Alternatively, you can wrap the value of the value attribute in quotation marks:

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

Answer 2

Your answer helped me solve the problem ..... therefore by inserting

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

the desired option was really selected .... (in this case, the first one, see the figure: red frame), but, unfortunately, the selection field did not notice this change (see image: blue frame). Thus, the selection text was still “Lagerort” (which is a kind of placeholder), and not the desired (as well as already selected) value “0001”.

The solution was only to force a change of choice:

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

After that, the selection value was also "0001". Thank you for your help and best wishes!

Answer 3

Try to press DOM only once. For example, create a string with all parameters, and then add it. Note also the quoted value (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 choose, you need to do this AFTER THE APPLICATION:

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

Additionally, you can set the selected attribute during the creation of the option (for example, check if (j === 0) , add this selected attribute text.