Question

我正在使用jQuery。我的页面中有一个选择标记。

<select id="sel">
  <option value="1">One</option>
  <option value="2">Two</option>
</select>

我在加载页面时使用ajax从服务器获取一些值。

$().ready(function() {
  $.post(url, function(result) {
    var value = result.value; // for example, result can be {value: "1"}.
    console.log($("#sel")[0].options.length); // output: 0 // EMPTY options ??
    $("#sel").val(value);
  });
});

但我选择的选项不会改变。 select标签似乎没有选项。在这种情况下，DOM不应该已经完全加载了吗？

我可以在加载页面时设置所选选项，并且用户会触发某些操作。

Answer 1

尝试这种变化，这应该可以像你想要的那样工作。

我假设resultValue是select的选项的索引。

$().ready(function() {
  $.post(url, function(result) {
    var resultValue = result.value; // for example, result can be {value: "1"}.
    var select = $('#sel');
    var opts = $(select[0].options).toArray();
    console.log(opts); // output will be the number of child nodes within the Select

    // Setting the new value of the select, based on the result.value
    select.val(opts[resultValue].value); 
  });
});

Answer 2

试试这个

 $.post(url, function(result) {
    var value = result.value; 

    $("#sel option[value="+value+"]").attr("selected", true);
  });

加载页面时无法使用javascript设置选择选项

2 个答案: