how to select remaining elements in multi select

Question

I have a multi select html field which includes categories and the elements relating to those categories

I want a person to be able to select individual courses or if they select a category (value prefixed with cat_) then it should mark the following courses as selected until it finds the next category

I have tried a few things but with no success

$(document).ready(function() {


  $('#courses').change(function() {

    $(this).nextUntil('option[name^="cat_"]').each().prop("selected", "selected");
    $(this).nextUntil('option[name^="cat_"]').prop("selected", "selected");
    $(this).closest("option").nextAll().each(function() {
      $this.prop("selected", "selected");
    });

  });
});

user_4620771 · Answer

You can check if selected option startsWith cat_ keyword and if it does you can set selected prop to true of all nextUntil('option[value^="cat_"]') options.

function select(element, callback) {
  element.find('option').on('click', function(event) {
    const selected = $(this);

    if (selected.val().startsWith('cat_')) {
      selected
        .nextUntil('option[value^="cat_"]')
        .prop('selected', true)
    }

    callback(element.val())
  })

}

select($('#courses'), value => {
  console.log(value)
})

select {
  height: 250px;
}

user_5312731 · Answer

You can recursively move through the siblings, checking to see if they are a new category or part of the current one. Example below;

**Note: ** this works with multiple selections. You'll also need to reverse this logic to unselect.

let select = document.getElementsByClassName('form-control')[0];

function checkSibling(sibling){
  if(sibling && !sibling.value.includes('cat')) {
    sibling.selected = true;
    checkSibling(sibling.nextElementSibling);
  }
}

select.addEventListener('click', function(event){
  checkSibling(event.target.nextElementSibling);
});

user_5150781 · Answer

You can try like this (must appreciate)--

$(document).ready(function() {
    $('[value^="cat_"]').click(function(){
        $(this).nextUntil('[value^="cat_"]').prop("selected", "selected");

    });
});

how to select remaining elements in multi select

3 Answers