接下来选择与筛选器匹配的选项
Next select option that matches filter
我在尝试让下拉列表循环到下一个选项时遇到问题,该选项的数据已完成=错误
<select id="selectionChamp">
<optgroup label="1">
<option data-completed=true selected>Text 1</option>
</optgroup>
<optgroup label="2">
<option data-completed=true>Text 2</option>
</optgroup>
<optgroup label="3">
<option data-completed=true>Text 3</option>
</optgroup>
<optgroup label="45">
<option data-completed=false>Text 4</option>
<option data-completed=false>Text 5</option>
</optgroup>
</select>
<input type="button" id="fieldNext" value="Next">
Javascript:
$("#fieldNext").click(function() {
var $selected = $("option:selected");
var filter = "[data-completed!=true]";
$selected.attr("data-completed", true).prop("selected", false);
var $next = $selected.next("option"+ filter);
if ($next.length === 0) {
$next = $selected.parent("optgroup").next("optgroup:has(option"+ filter+")").find("option"+ filter+":first");
}
$next.prop("selected", true);
});
请参阅:http://jsfiddle.net/w9kcd/105/
我发现它在filter = "";
时有效,但在filter = "[data-completed!=true]";
时无效
它应该从1开始,跳到4,然后跳到5,跳过2和3。
next
方法只选择元素的下一个直接同级。如果您将筛选器传递给它,它将选择下一个直接同级,并且仅当它与指定的选择器匹配时。直到找到匹配的元素,它才会继续。替代方法是nextAll
,它这样做,但是下一个目标元素不是起始元素的兄弟元素。您可以从所选元素的父元素开始,然后使用:has
选择器来查找具有预期子元素的optgroup
,但更好/更有效的选项是:
var $options = $("#selectionChamp option");
$("#fieldNext").click(function() {
var $selected = $("option:selected").attr("data-completed", 'true');
// get the index of the current selected element
var i = $options.index($selected);
// find the first next matching element
// you can also pass a string to the filter method: `[data-completed!="true"]`
var $next = $options.slice(i /* + 1 */).filter(function() {
return this.getAttribute('data-completed') !== "true";
}).eq(0).prop("selected", true);
});
在这里,您可以在jsfiddle.net上找到一个演示。
相关文章:
- 使用此选项选择父类内部的类
- 更新:仅根据单选按钮和所选选项选择特定项目
- 使用PHP通过HTML表单选项选择器过滤MYSQL结果
- ng-单击在IE中不起作用的选项选择Angularjs
- 从选项选择中删除值
- On为<选项>选择等效项
- 用户界面先前选择的选项选择更改
- 使用ng重复或ng选项和删除空白选项选择长方体角度
- 在HTML5、CSS、JavaScript中添加选项选择器,类似于移动应用程序中的选项设置
- 输入:选中,选项:选择选择器
- 根据使用angularjs从下拉菜单中选择的选项选择适当的复选框
- 如何根据 html 中的选项/选择重定向用户(单击按钮后)
- 使用ng选项选择中的ng选项进行过滤器下拉列表
- 如何设置选项选择的值
- 如何搜索长下拉选项/选择列表
- jQuery - 根据下拉选项选择列出结果
- 从选项选择单击时打开 2 个 URL
- 在 Angular JS 中为 ng 选项选择默认值
- 下拉选项选择的操作
- 通过单击单选按钮清除所有选项选择条目