Javascript 如何在JQuery中获取所选列表属性

我不希望此警报框在单击按钮时显示属性

item\u 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' />

JSfiddle-

简单地说：

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

---

假设您需要所选

中的属性：

如果要获取所有属性，请执行以下操作：

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

但是，如果您想使用自定义属性，并且希望您的文档进行验证（假设您使用的是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' />

参考资料：

---

可能的重复您想获取所有

元素的属性，还是仅从所选

元素获取属性？

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

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

<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' />

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