Show/hide options on bootstrap-select?

Question

Short time ago i trying to write a little snippet on bootstrap-select lib, which should open and hide some extra options on click/change event on parent option (half of this in bottom example).

How it should to work...

When the user clicks on a specific option item, some extra items with more additional information are showing up below the parent. When the user clicks one more time, extra items should be hidden and child items are cleared from already selected options.

What is the problem?

Unfortunately my level of jquery isn't high, so for this moment i have only /showing/ functionality without /hiding/ child items and clearing selected (if some child of hided parent was selected). And will be great if checked arrow on parent item will not showing, only on child.

My example

This is my short code -

    $('.remove-example').find('.hider').hide();

  $('.selectpicker').change(function() {

      var feta = $(this).find("option:selected:first").attr('id');
      var feta1 = $(this).find("option:selected:last").attr('id');
      
      $('.remove-example').find('.' + feta).show();
      $('.remove-example').find('.' + feta1).show();
      
    $('.remove-example').selectpicker('refresh');

  });




$('.rm-mustard').click(function() {
    $('.remove-example').find('.Mustard').hide();
    $('.remove-example').selectpicker('refresh');
  });
  $('.rm-mustard1').click(function() {
    $('.remove-example').find('.Mustard').show();
    $('.remove-example').selectpicker('refresh');
  });


 $('.selectpicker').selectpicker();

.btn-primary {
  padding: 0px 74px;
  margin-top: 5px;
}                
#tastes {
  margin: 15px 0px 0px 15px;
}

.padd {
 margin-left:20px;   
}
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css" rel="stylesheet"/>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

 <select class="selectpicker remove-example" multiple>
    <option  id="Mustard" value="">Mustard</option>
     <option data-subtext="50g" class="Mustard hider padd">Mustard2</option>
     <option data-subtext="1kg" class="Mustard hider padd">Mustard3</option>
    <option id="Ketchup">Ketchup</option>
     <option data-subtext="50g" class="Ketchup hider padd">Ketchup2</option>
     <option data-subtext="1kg" class="Ketchup hider padd">Ketchup3</option>
    <option value="Relish">Relish</option>
  </select>


<button class="btn btn-success rm-mustard1">Show Mustard</button>
<button class="btn btn-warning rm-mustard">Remove again</button>

http://jsfiddle.net/k0r974b7/

Parent is: Mustard/Ketchup

Child is: Mustard1,Mustard2/Ketchup1,Ketchup2

Answer 1

Try

$('.remove-example').find('.hider').hide();
$('.selectpicker').change(function() {

  var childSelector = $(this).find('option[id]:selected').map(function() {
    return '.' + this.id;
  }).get();


  var $cvisible = $(this).find('.hider').hide().filter(childSelector.join()).show();
  $(this).find('.hider').not($cvisible).prop('selected', false);
  $(this).selectpicker('refresh');

});

$('.rm-mustard').click(function() {
  $('.remove-example').find('.Mustard').hide();
  $('.remove-example').selectpicker('refresh');
});
$('.rm-mustard1').click(function() {
  $('.remove-example').find('.Mustard').show();
  $('.remove-example').selectpicker('refresh');
});

.btn-primary {
  padding: 0px 74px;
  margin-top: 5px;
}
#tastes {
  margin: 15px 0px 0px 15px;
}
.padd {
  margin-left: 20px;
}

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>

<select class="selectpicker remove-example" multiple>
  <option id="Mustard" value="">Mustard</option>
  <option data-subtext="50g" class="Mustard hider padd">Mustard2</option>
  <option data-subtext="1kg" class="Mustard hider padd">Mustard3</option>
  <option id="Ketchup">Ketchup</option>
  <option data-subtext="50g" class="Ketchup hider padd">Ketchup2</option>
  <option data-subtext="1kg" class="Ketchup hider padd">Ketchup3</option>
  <option value="Relish">Relish</option>
</select>
<button class="btn btn-success rm-mustard1">Show Mustard</button>
<button class="btn btn-warning rm-mustard">Remove again</button>