如何从使用jquery动态生成的选择中获取选项的值

Question

我正在使用以下脚本生成选择

var opts = $.parseJSON(response);
$.each(opts, function(i, d) {
    if (i == 0) {
        $('#movie').append('<option value="' + d.movie_id + '" onclick="selectMovie(this.value)"selected>' + d.movie_name + '</option>');
    } else {
        $('#movie').append('<option value="' + d.movie_id + '" onclick="selectMovie(this.value)">' + d.movie_name + '</option>');
    }

});

但无法使用获取默认值

$('#movie').val()

要么

var tmp = document.getElementById('movie').value;

需要帮忙

Answer 1

您正在异步接收数据，这就是尝试访问元素时该元素尚未在DOM中的原因。

您有2个选择：

a）使用aync: false作为选项，这意味着$ .ajax函数将允许您发出同步请求。 ajax调用完成后，将执行之后的JS。

b）更好的方法是使用ajax函数的success回调。 客户端收到响应后，您可以使用上面的代码段循环浏览。

只需将$('#movie').val()放在成功回调内的每个循环后面即可。

如果仍然无法正常工作，则必须告诉jQuery等待执行，直到.each循环完成。 有时仅通过将函数调用放在每个循环之后就无法访问由此创建的元素。

在这种情况下，您可以像下面这样使用.promise() ：

$.each(opts, function(i, d) {
  if (i == 0) {
    $('#movie').append('<option value="' + d.movie_id + '"      onclick="selectMovie(this.value)"selected>' + d.movie_name + '</option>');
  } else {
    $('#movie').append('<option value="' + d.movie_id + '" onclick="selectMovie(this.value)">' + d.movie_name + '</option>');
  }
}).promise().done(function(){ $('#movie').val() });