0

HTMLコンテンツ、特に要素を動的にロードしています。オプションの数が多いため、すべてのオプションは JSON 配列で一度クライアントに転送され、クライアントのブラウザによって入力される必要があります。<select>このために、すべての要素にイベントを関連付けたいと思います。これにより、多数の<option>要素が作成され、要素からの基準に基づいてそのうちの 1 つが選択され<select>ます。

このJSFiddleは、select 要素をクリックすることで目的を達成する方法を示しています。ただし、オプション タグを作成し、要素が DOMReady になったら選択したインデックスを表示したいのですが、それに適用されるイベントが見つかりません。

4

3 に答える 3

1

代わりにこれを行うことができます：

http://jsfiddle.net/LXVhu/2/

dom に追加したばかりの要素を変数に格納し、この変数を使用して関数を呼び出します。

function populateSelect(elmt) {
var select = elmt;
    $(countries).each(function(i) {
        var option = $("<option></option>").attr("value", this.Key).text(this.Value.EnglishName);
        if (this.Key === select.data('selected')) option.prop("selected", true);
        select.append(option);
        select.get().selectedIndex = i;
    });    
}

$('#test').click(function() {
    // this select field will not be populated!
    var elmt = $('<select data-selected="USA" class="countrylist"></select>').appendTo("body");
    populateSelect(elmt);
});
于 2013-09-06T10:12:28.690 に答える
0

要素を追加するときにバインドしているイベントを手動で呼び出すことで、なんとか方法を見つけることができました。

// Instead of having to "click" the select fields
// I'd like to populate the <option> tags everytime a new select item is injected into the DOM.
$(document).on("click", "select.countrylist", function() {
    var select = $(this);
    $(countries).each(function(i) {
        var option = $("<option></option>").attr("value", this.Key).text(this.Value.EnglishName);
        if (this.Key === select.data('selected')) option.prop("selected", true);
        select.append(option);
        select.get().selectedIndex = i;
    });
});
// populate all existing selects
$("select.countrylist").click();

// create new select and populate it
$('#test').click(function() {
    var x = $('<select data-selected="USA" class="countrylist"></select>').appendTo("body");
    // manually trigger a click which causes populating of select
    x.click();
});

実際の例については、この JSFiddle を参照してください

クリック イベントを select 自体ではなく $(document) にバインドする必要があることに注意してください (機能しません)。

助けてくれてありがとう！

于 2013-09-06T11:18:38.617 に答える