1

<option>に2を追加するjQuery/Ajax関数があり<select>ます。

function addOption() {  
    var author = $("#authors").val();
    $('#books').empty(); 
    $('#books').html('<option value="">Please Select</option>'); 
$.ajax({ 
      type: "post", 
      url:  "books.php", 
      data: { author:author }, 
      success: function(response){ 
          $('#books').append(response); 
      } 
    }); 
}

responseとして戻ってきます-

<option value="bookA">Book A</option>
<option value="bookB">Book B</option>

そして今booksは-

<select id="books">
<option value="">Please Select</option>
<option value="bookA">Book A</option>
<option value="bookB">Book B</option>
</select>

これはうまくいきます。

今、私は呼び出した後にselected option使用を設定したい-.val()addOption()

$('#authors').change( function(){
addOption();
$('#books').val('bookB');
});

これは選択されませんBook B。

ハードコーディングする.append()と機能します-

function addOption() {  
    var author = $("#author").val();
    $('#books').empty(); 
    $('#books').html('<option value="">Please Select</option>');
    $('#books').append('<option value="bookA">Book A</option>\n<option value="bookB">Book B</option>);
}

$('#authors').change( function(){
addOption();
$('#books').val('bookB');
});

.ajax関数に追加されたオプションがを使用して選択できない理由はあります.val()か？直接追加すると選択できますか？

4

5 に答える 5

3

これは、AJAX呼び出しが非同期であるためです。そのため、オプションを選択しようとしても、まだ選択に追加されていません。

関数でコールバックを使用して、応答が到着したときに何かを実行できるようにします。

function addOption(callback) {  
  var author = $("#authors").val();
  $('#books').empty(); 
  $('#books').html('<option value="">Please Select</option>'); 
  $.ajax({ 
    type: "post", 
    url:  "books.php", 
    data: { author:author }, 
    success: function(response){ 
      $('#books').append(response); 
      callback();
    }
  }); 
}

使用法：

$('#authors').change( function(){
  addOption(function(){
    $('#dropdownB').val('bookB');
  });
});
于 2013-01-01T23:04:03.893 に答える
2

Ajaxは非同期です。値を設定すると、その値を使用するオプションはありません。コードを成功コールバックに入れることができます。

  success: function(response){ 
      $('#books').append(response); 
      // ...
  }

asyncまたは、Ajaxリクエストのプロパティの値をfalse;に設定します。

于 2013-01-01T23:01:42.280 に答える
2

JAXは非同期です。つまり、addOption（）メソッドを呼び出すと、Ajax呼び出しが実際に行われる前に戻る可能性があります（おそらくそうなるでしょう）。したがって$('#dropdownB').val('bookB');、オプションを追加するためにAjaxコールバックがトリガーされる前に呼び出しています。

$('#dropdownB').val('bookB');ajax呼び出しのsuccessコールバックに入れてみてください。そうすれば、それが機能することを確認できます。

于 2013-01-01T23:01:54.373 に答える
1

これは、ajaxが非同期であるためです。つまり、ブラウザエンジンが戻って新しいオプションを選択リストに追加するまでに、ブラウザエンジンはすでに続行し、値を設定しようとしました（まだ追加されていません）。値設定ロジックを移動して、ajax応答の一部として機能するようにしてください。

于 2013-01-01T23:01:39.503 に答える
1

1）$('#dropdownB').val('bookB');AJAXは非同期であり、選択したアイテムを変更しようとするとリクエストが実行されない可能性があるため、ajax-callのsuccess-event内に入れる必要があります。そのため、選択するアイテムはまだありません。
2）の選択した項目に追加しますが#books、変更します#dropdownB。これらは2つの異なるIDであるため、2つの異なるDOM要素です。

于 2013-01-01T23:05:36.280 に答える