完全匹配的选项和optgroup [英] Matching exactly option and optgroup
问题描述
我有一个问题与下面的脚本时,选择的选项成为长:
选项很少的解决方案 http://jsfiddle.net/hsQjh/5/ >
问题较多的选项: http://jsfiddle.net/hsQjh/6/
我的第一个选择框选项最多包含40个以上的选项,因此,当我首先选择选项' 2 '时,第二个选择框也最多包含40个以上的optgroup.框,填充第二个框的所有以2开头的optgroup,即optgroup' 2 ',' 20 '-' 29 '填充,其他选择的选项也一样.
在选项的值和optgroup的标签之间是否可以完全匹配"ID"?
function filterActivity(e){
var ids = $('#filterActivity + div input:checked').map(function(i) {
return $(this).val().replace(/ .*/, '');
}).get(); // Retrieve checked IDs
$('#filterSubActivity + div div label').each(function() { // Show matching options
$(this).toggle($.inArray($('input', this).val()[0], ids) > -1);
});
$('#filterSubActivity + div label.optGroup').each(function() { // Show matching groups
$(this).toggle($(this).next().find('label:visible').length > 0);
});
}
谢谢.
使用基于正则表达式的过滤器
$('#filterSubActivity + div div label').each(function() { // Show matching options
$(this).toggle($.inArray($('input', this).val().match(/^\d+/)[0], ids) > -1);
});
演示:小提琴
I got an issue with following script when the select-options become long:
Solution with few options http://jsfiddle.net/hsQjh/5/
Long options with issue: http://jsfiddle.net/hsQjh/6/
My first select-box option is up to 40+ of options, thus the second select-box would be up to 40+ of optgroup as well, when I picked option '2' on first box, second box are populated all optgroup that is numbered started with 2, which is optgroup '2', '20' - '29' are populated, the same are happen to other options which is had selected too.
Could it be match the 'IDs' exactly in between option's value and optgroup's label?
function filterActivity(e){
var ids = $('#filterActivity + div input:checked').map(function(i) {
return $(this).val().replace(/ .*/, '');
}).get(); // Retrieve checked IDs
$('#filterSubActivity + div div label').each(function() { // Show matching options
$(this).toggle($.inArray($('input', this).val()[0], ids) > -1);
});
$('#filterSubActivity + div label.optGroup').each(function() { // Show matching groups
$(this).toggle($(this).next().find('label:visible').length > 0);
});
}
Thanks.
Use a regex based filter
$('#filterSubActivity + div div label').each(function() { // Show matching options
$(this).toggle($.inArray($('input', this).val().match(/^\d+/)[0], ids) > -1);
});
Demo: Fiddle
这篇关于完全匹配的选项和optgroup的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!