jQuery - 根据属性获取所选选项后下拉列表中下一个选项的值

Question

HTML输出

<option task_estimated_hours="100" value="1"> - Parent Task</option>
<option task_estimated_hours="50" value="2"> -  - Child task</option>
<option task_estimated_hours="50" value="3"> -  - Child task</option>

jQuery代码：

$('#dropDownId option:selected').next().val()

以上显然会在选择一个选项后给我 value 下一个选项，但不是基于属性 task_estimated_hours。以下似乎不起作用。它说 TypeError: $(...).attr(...).next is not a function

$('#dropDownId option:selected').attr('task_estimated_hours').next().val();

如何根据传递的属性获取下一个选项的值？

Answer 1

试试这个：-

$('#dropDownId option:selected').next().attr('task_estimated_hours');

旁注：- 使用 HTML5 自定义 data-* 属性，即使用 data-task_estimated_hours[=15= 而不是 task_estimated_hours ]

Fiddle

Answer 2

也许这对你有帮助

HTML:

<select id="dropDownId">
<option task_estimated_hours="10" value="1">1 option</option>
<option task_estimated_hours="20" value="2" selected="selected">2 option</option> 
<option value="3" >3 option</option>
<option task_estimated_hours="40" value="4">4 option</option>
</select>

jQuery:

alert($('#dropDownId option:selected').nextAll("option[task_estimated_hours]:first").attr("task_estimated_hours"));

Answer 3

Fiddle:

$('select option:selected').next('option[task_estimated_hours]').val();