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

参考文献：

如何在JQuery中获取选定的列表属性

3 个答案: