ドロップダウンボックスに "Loading ..."を表示

Question

jqueryを使用してドロップダウンボックスを読み込むためのデータベースクエリを実行しています。クエリが実行されている間にドロップダウンボックスに「Loading ...」という単語を表示する方法はありますか？

ありがとうございました。アヤックスが実行されている間

Answer 1

ようなコードを書くことができ、のは「userChoice」ダウンあなたのドロップを呼ぶことにしましょう：

$('#myDropDown').prepend($('<option></option>').html('Loading...')); 

Answer 2

あなたのドロップダウンリストに一時的な項目を追加することができますが、

$(document).ready(
    function() 
    { 

     //Before calling your ajax method, clear the select drop down. 
     //and add a loading option. 
     $('#userChoice') 
      .children() 
      .remove() 
      .end() 
      .append('<option value="">Loading...</option>'); 

     $.ajax(

        //Load the userChoice as usual in success handler of your ajax call. 
        success : function() { //Load #userChoice } 
      ); 


    } 
); 

Answer 3

を何もない場合最初に、デフォルトのHTMLにして、jQueryの半分を削除しました。

<select> 
    <option>Loading...</option> 
</select> 

クエリが終了したら、optionを結果に置き換えてください。

Answer 4

あなたはAJAX呼び出してクエリを実行している場合は最初のドロップダウンリストをクリアし、（クライアント側のJavaScriptで）ロードメッセージを挿入するために、次のように、あなたが何かを使用することができます。

var lb = document.getElementById ("myDropdownList"); 
lb.options.length = 0; 
var newOpt = new Option("Loading...", ""); 
lb.options[0] = newOpt; 
// Your jquery call here 
... 

Answer 5

がこれを追加は、 Ajaxのポストの前に

$('#myDropDown').empty(); 
$('#myDropDown').append($('<option></option>').html('Loading...')); 

は再び成功に動的に

$('#myDropDown').empty(); 
$('#myDropDown').append($('<option></option>').val("").html("Select")); 
for (var i = 0; i < array.length; i++) { 
       $('#myDropDown').append($('<option></option>').val(array[i].selectedvalue).html(array[i].selectedtext)); 
      }