如何获取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。