如何從 jQuery 中選擇的選定選項中獲取屬性？

Question

我在 HTML 中有下一個選擇框：

<select id="listbox-taskStatus" class="selectpicker">
    <option status="0">In progress</option>
    <option status="1">Not started</option>
    <option status="2">Done</option>
    <option status="3">Failed</option>
</select>

我想從選定的選項中讀取屬性值。

如果只是取值，很簡單：

var value = $('#listbox-taskStatus').val();

但是，如果我想從選定的選項中獲取屬性值，我該怎么辦？ 我知道， .attr()必須有幫助，但是當我嘗試使用它時，我得到了不正確的結果。

我試過下一個：

var status = $('#listbox-taskStatus option').attr('status');

但返回值始終為0 ，盡管事實上我選擇了不同的選項。

怎么了，怎么解決我的問題？

Answer 1

使用:selected選擇器

var status = $('#listbox-taskStatus option:selected').attr('status');

但是，我建議您使用以data-為前綴的屬性。 然后你可以使用.data()

var status = $('#listbox-taskStatus option:selected').data('status');

演示

Answer 2

var optionAttr1 = $('#listbox-taskStatus').find('option:selected').attr("status");
var optionAttr = $('#listbox-taskStatus option:selected').attr("status");