JSFiddle - React, Tailwind, and code Playground

by Robert N.

HTML

<select multiple="multiple" size="5">
  <option>
    Test1
  </option>
  <option>
    - Test1_1
  </option>
  <option>
    -- Test1_1_1
  </option>
  <option>
    -- Test1_1_2
  </option>
  <option>
    - Test1_2
  </option>
  <option>
    Test2
  </option>
  <option>
    - Test2_1
  </option>
  <option>
    -- Test2_1_1
  </option>
  <option>
    - Test2_2
  </option>
  <option>
    -- Test2_2_1
  </option>
</select>
<input id="reset" type="button" value="Reset" />

JavaScript

(function($) {
  $(document).ready(function() {
    $('option:contains("-")').hide();
    $('option:not(:contains("-"))').click(function() {
      $(this).siblings().hide();
      $(this).nextUntil('option:not(:contains("-"))').show();
    });
    $('#reset').click(function() {
      $('option:contains("-")').hide();
      $('option:not(:contains("-"))').show();
    });
  });
})(jQuery);