My select field is filtered as below:
$("#asortyment option").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
});
To change selected option I use code:
function wiecej(){
var asort_select = document.getElementById("asortyment");
asort_select.selectedIndex = asort_select.selectedIndex + 1;
$("#asortyment").trigger("change");
};
But the problem is that function wiecej change option to next but in not filtered select.
Use the jQuery :visible pseudo-class to match the non-filtered elements. And use :gt to start after the currently selected option.
function wiecej() {
var asort_select = document.getElementById("asortyment");
let current = asort_select.selectedIndex;
let next = $(`#asortyment option:gt(${current}):visible`).first();
if (next.length > 0) {
$(asort_select).val(next.val()).change();
}
};Filter visible options and then change selected index:
function wiecej(){
var asort_select = document.getElementById("asortyment");
var nextItem = $("#asortyment option:gt("+asort_select.selectedIndex+")").filter(function(){ return $(this).css('display') != 'none';}).first();
var nextIndex = 0;
if (nextItem.length > 0 ) {
nextIndex = nextItem[0].index;
} else {
var nextItem = $("#asortyment option").filter(function(){ return $(this).css('display') != 'none';}).first();
nextIndex = nextItem[0].index;
}
asort_select.selectedIndex = nextIndex;
$("#asortyment").trigger("change");
};