如何獲取JQuery中的選定列表屬性

Question

我不希望此警告框顯示單擊按鈕時的屬性item_name。我有JQuery。

這裏是我想要使用它不到風度的代碼工作雖然

HTML

<select class="p1add1"> 
    <option class="op1" value="3.74" item_name='BOWL'>Bowl - £3.74</option> 
    <option class="op2" value="7.53" item_name='COSTER'>Coster - £7.53 (six pack)</option> 
    <option class="op3" value="5" item_name='CLOCK'>Clock - £5.00</option> 
</select> 
<input type='button' value="Go!" id='bu' /> 

JQuery的

$('#bu').click(function() { 
    alert($('.p1add1').attr('item_name')); 
}); 

的jsfiddle - http://jsfiddle.net/LYv2W/

Answer 1

$('#bu').click(function() { 
    alert($('.p1add1').children('option:selected').attr('item_name')); 
}); 

http://jsfiddle.net/LYv2W/1/

Answer 2

簡單：

alert($('.p1add1 :selected').attr("item_name")); 

Fiddle

Answer 3

假設你想從選定<option>屬性：

$('#bu').click(function() { 
    alert($('.p1add1 option:selected').attr('item_name')); 
}); 

JS Fiddle demo。

如果你想獲得所有屬性：

$('#bu').click(function() { 
    alert($('.p1add1 option').map(function(){ 
     return this.getAttribute('item_name'); 
    }).get().join(', ')); 
}); 

JS Fiddle demo。

但如果你想使用自定義屬性，並希望您的文檔驗證（假設你使用HTML 5），我強烈建議您使用data-*屬性來代替：

<select class="p1add1"> 
    <option class="op1" value="3.74" data-item_name='BOWL'>Bowl - £3.74</option> 
    <option class="op2" value="7.53" data-item_name='COSTER'>Coster - £7.53 (six pack)</option> 
    <option class="op3" value="5" data-item_name='CLOCK'>Clock - £5.00</option> 
</select> 
<input type='button' value="Go!" id='bu' /> 

隨着jQuery的：

$('#bu').click(function() { 
    alert($('.p1add1 option:selected').data('item_name')); 
}); 

JS Fiddle demo。

參考文獻：

• data()。
• get()。
• map()。
• :selected selector。