Search code examples
javascriptjqueryhtmlselectionbootstrap-multiselect

select all the options below the selected option in drill down select menu

How do I select all the options below the selected option

Example

<select multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

If I select volvo then all the options below volvo, i.e; saab, opel and audi need to be selected. Similarly, selecting opel should select audi but not volvo and saab.

Solution

  • Use .nextAll() to find all remaining options after the current one and set them to selected:

    $("select").change(function(){
   $(this).find("option:selected").nextAll().prop("selected", true);      
});

    FIDDLE