獲取動態創建的select子元素的屬性

Question

我有一個動態創建的select元素。我將如何獲得所選特定選項的屬性。現在它只是給我第一個元素的att。

這裏是我的代碼

$('button').click(function(){ 
     var arena = $(this).attr('id'); 
     var id = arena + '.jpg'; 
     $('#header').css('background-image', 'url('+id+')'); 
     $('#chooseArena').html("" + "<h1>Pick your ninja</h1>\ 
      <select name='first'>\ 
       <option id = 'black' value='black.png'>Black</option>\ 
       <option id = 'green' value='green.png'>Green</option>\ 
      <select>\ 
      <select name='second'>\ 
       <option value='black.png'>Black</option>\ 
       <option value='green.png'>Green</option>\ 
      <select>"); 

    }); 
    $(document).on('change', 'select', function(e){ 
     var ninja1 = $(e.target).children().attr('id'); //this always returns the first attr. What should I do to get this to return the child element selected. 
     alert(ninja1); 
    }); 

Answer 1

獲取使用:selected僞類選擇範圍內選擇的選項。

$(document).on('change', 'select', function(e){ 
    var ninja1 = $('option:selected', this).attr('id'); //this always returns the first attr. What should I do to get this to return the child element selected. 
    alert(ninja1); 
});