jquery - 以编程方式更改 jQuery 选择选项 - 不起作用

Question

我试图记住 jquery select 中所选选项的决定。不幸的是，我无法以编程方式选择所需的选项。

以下是更多详细信息: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(所有有效选项都在 ajax 调用后插入):

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]);
}    

还为选择设置了一个监听器，用于存储用户的决策JS:

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

“外观”:

用户选择有效的“Lagerort”选项(stockId)后，将打开下一个 HTML 站点。用户的决定(选项文本和选项值)保存在 localStorage 中。返回此页面时，所做的决定仍应为所选选项。例如，用户选择 Lagerort“0001”，更改站点并返回 - 所选选项仍应为“0001”。因此，我再次加载股票(效果很好)

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]);
}

现在我想再次设置所选选项。但这不起作用......我尝试了很多不同的方法，并因为这个(我猜......)简单的问题而损失了大约两天的时间。到目前为止，这是我的方法(还没有任何效果)......为了更好的测试，所需的选项是硬编码的(值= 1，文本= 0001 =两者都将链接到选择中的第一个选项)。

// 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");
    // });

 }

在 JSFiddle 中插入一些这种方法是可行的 - 但显示的代码对我的应用程序没有任何帮助。我使用的 JS 版本是 jQuery-mobile-1.3.0 和 jQuery-1.9.1.min。我将非常感谢任何帮助或一些提示!

Answer 1

你的回答帮助我解决了问题......所以，插入

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

确实选择了想要的选项......(在本例中是第一个；参见图片:红色边框)，但不幸的是，选择框没有注意到这种变化(参见图片:蓝色边框)。因此，选择的文本仍然是“Lagerort”(这是某种占位符)，而不是想要的(也已经选择的)值“0001”。

解决方案只是强制更改选择:

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

此后，slect的值也为“0001”。感谢您的帮助和良好祝愿!