jquery - jqueryを使用してアラートボックスのonclickイベントに配列値（動的）を表示する

Question

ドロップダウン リストに配列を設定しました。

アイテムをクリックすると、colorList[i].Colorをアラートボックスに表示したい。

デモ: http://jsfiddle.net/Xz9Hz/

HTML:

<div>   
<div id="DynaLoad">
</div>  
</div>

JQuery:

$(document).ready(function() {
var colorList = [
    { Color: "#FFFFFF", Name: "White"},
    { Color: "#202020", Name: "Grey"},
    { Color: "#DE2341", Name: "Red"},
];

    $('#DynaLoad').append("<select id='cList'></select>");
    for (i = 0; i < colorList.length; i++) {
    $("#cList").append("<option class='clr'>" +
    colorList[i].Name + "</option>");

    // Want to alert colorList[i].Color onClick of the particular selection

});

前もって感謝します。

Answer 1

change イベントを live in jquery にバインドできます。

  $(function(){
            $("#DynaLoad").live("change",function(){
               alert($(this).val()); 
            });
        })

Answer 2

選択リストを作成した後、これを追加します。

    $('#cList').change(function() {
      alert($(this).val());
    });

http://jsfiddle.net/Xz9Hz/1/

Answer 3

select はスクリプトで動的に追加され、on を使用すると安全になるため、on()を使用して cList で変更イベントをバインドできます。

ライブデモ

$('#DynaLoad').on("change", "#cList", function () {
    alert($(this).val());
});