CODEWITHSUNDEEP
javascriptjquery
Chris Mccabe
Chris Mccabe

Reputation: 1951

how to select remaining elements in multi select

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

  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" name="courses[]" id="courses" multiple="true">
  <option value="cat_1">data / </option>
  <option value="1">data / Guitar </option>
  <option value="2">data / keyboard </option>
  <option value="cat_2">mandatory / </option>
  <option value="cat_3">fb / </option>
  <option value="3">fb / Node js </option>
  <option value="4">fb / PHP programming </option>
  <option value="5">fb / C# </option>

</select>

Upvotes: 3

Views: 98

Answers (3)

Nenad Vracar
Nenad Vracar

Reputation: 122155

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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" name="courses[]" id="courses" multiple="true">
  <option value="cat_1">data / </option>
  <option value="1">data / Guitar </option>
  <option value="2">data / keyboard </option>
  <option value="cat_2">mandatory / </option>
  <option value="cat_3">fb / </option>
  <option value="2">fb / Node js </option>
  <option value="3">fb / PHP programming </option>
  <option value="4">fb / C# </option>
</select>

Upvotes: 1

Someone
Someone

Reputation: 3578

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);
});
<select class="form-control" name="courses[]" multiple
    id="courses" multiple="true" >
    <option value="cat_1">data / </option>
    <option value="1">data / Guitar </option>
    <option value="2">data / keyboard </option>
    <option value="cat_2">mandatory / </option>
    <option value="cat_3">fb / </option>
    <option value="2">fb / Node js </option>
    <option value="3">fb / PHP programming </option>
    <option value="4">fb / C# </option>

</select>

Upvotes: 0

Zigri2612
Zigri2612

Reputation: 2310

You can try like this (must appreciate)--

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

    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" name="courses[]" id="courses" multiple="true">
  <option value="cat_1">data / </option>
  <option value="1">data / Guitar </option>
  <option value="2">data / keyboard </option>
  <option value="cat_2">mandatory / </option>
  <option value="cat_3">fb / </option>
  <option value="3">fb / Node js </option>
  <option value="4">fb / PHP programming </option>
  <option value="5">fb / C# </option>

</select>

Upvotes: 0

Related Questions