<option>をクリックするとjqueryのクリック機能が正常に動作しない

Question

ドロップダウンにはデータが取り込まれますが、初めてselectタグをクリックすると、すべてのリストが表示されますが、リストをスクロールするボタンが表示されますクリックすると、完全なリストが表示されます。私は最初のクリックと2番目のクリックの動作とコード例の画像を添付しています。

first and second click

code

Answer 1

あなたはほとんど適切な例を提供していないので、それはあなたのHTMLは、あなたがjQueryのUIのような任意のフレームワークを使用している場合の設定であるかに困難です。

基本的には.preventDefault()、次にreturn trueの組み合わせを使用してAJAXが完了してから<options>が表示されるようにします。この例題はAJAX呼び出しを模倣するのではなく、メニューの構築に時間がかかります。

例：https://jsfiddle.net/Twisty/nn4m0c6r/

HTML

<div> 
    <label for="pro_id">Select Product</label> 
    <select name="pro_id" id="pro_id"> 
    <option>Select Product</option> 
    </select> 
    <button>Search</button> 
</div> 

はJavaScript

$(function() { 
    var i = 0, 
    r = Math.floor(Math.random() * 1000), 
    opts = []; 
    for (i; i <= r; i++) { 
    opts.push({ 
     id: i, 
     name: "Product Name " + i 
    }); 
    } 
    $("#pro_id").click(function(e) { 
    e.preventDefault(); 
    $.ajax({ 
     url: "/echo/json/", 
     dataType: "JSON", 
     data: { 
     json: JSON.stringify(opts) 
     }, 
     type: "POST", 
     success: function(data) { 
     $.each(data, function(index, row) { 
      $("#pro_id").append("<option value='" + row.id + "'>" + row.name + "</option>"); 
     }); 
     } 
    }); 
    return true; 
    }); 
}); 

あなたはあなたのコードに基づいて、あなたはJSONデータを受けていたかどうかを指定しなかったが、それをそのように見える。私の意見では$.ajax()を使用する方が良いでしょう。選択はAJAXがデータを取得している間に開き、オプションが表示されます。だから、いくつかの遅れがあります。可能であれば、ページがレンダリングされている間、またはreadyの直後にそのデータを収集することが最善の方法です。