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

Question

我试图记住jquery选择中所选选项的描述。不幸的是，我不能以编程方式选择想要的选项。

以下是一些详细信息：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]);
}    

还将一个Listener设置为select，用于存储用户决策 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]);
}

现在我想再次设置所选选项。但这不起作用....我已经尝试了很多不同的方法，并且在这2天内（我猜......）简单的问题就丢失了。这是我到目前为止的方法（没有任何工作，但是）....为了更好的测试，想要的选项是硬编码的（值= 1，text = 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-versions是jQuery-mobile-1.3.0和jQuery-1.9.1.min。我会非常感谢任何帮助或一些提示！

Answer 1

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

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

确实选择了想要的选项....（在这种情况下是第一个;见图片：红色边框）但不幸的是，选择框没有注意到这种变化（见图：蓝色边框）。所以select的文本仍然是“Lagerort”（它是某种占位符），而不是想要的（也是已经选择的）值“0001”。

解决方案只是强制改变选择：

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

此后，slect的值也是“0001”。 感谢您的帮助和祝福！

Answer 2

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

是正确的方法。

此外，您可能希望将value属性值包装在引号中：

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

Answer 3

尝试只打一次DOM。例如，创建一个包含所有选项的字符串，然后附加它。还要注意引用的值（HTML规范并非严格要求，但我会推荐它）

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

编辑：现在，确定选择哪个选项，您需要在APPEND之后执行此操作：

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

可选地，您可以在选项创建期间设置所选属性（例如，选中if (j === 0)，添加所选属性文本。