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

How can I get selected list attributes in JQuery

本文关键字：列表 属性 获取 JQuery      更新时间：2023-09-26

单击按钮时，我不希望此警报框显示属性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/

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

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

简单地说：

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

Fiddle

假设您想要来自所选<option>:的属性

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

JS Fiddle演示。

如果你想获得所有属性：

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

JS Fiddle演示。

不过，如果您想使用自定义属性，并希望您的文档进行验证（假设您使用的是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演示。

参考文献：

  • data()
  • get()
  • map()
  • :selected选择器
相关文章：