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.

CodePudding user response：

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();
  }
};

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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");
};