Показать/скрыть опции в bootstrap-select?

Question

Короткое время назад я пытаюсь написать небольшой фрагмент на bootstrap-select lib, который должен открыть и скрыть некоторые дополнительные опции в событии click/change на родительской опции (половина этого в нижнем примере).

Как это должно работать ...

Когда пользователь нажимает на конкретный пункт опций, некоторые дополнительные элементы с более дополнительной информации обнаруживаются ниже родителя. Когда пользователь нажимает еще один раз, дополнительные элементы должны быть скрыты, а дочерние элементы очищаются от уже выбранных параметров.

В чем проблема?

К сожалению, мой уровень jquery невелик, поэтому на этот момент у меня есть только/показ/функциональность без/скрытия/дочерних элементов и выделение выделенных (если был выбран какой-либо ребенок сдержанного родителя). И будет здорово, если отмеченная стрелка на родительском элементе не будет отображаться, только на дочернем.

Мой пример

Это мой короткий код -

$('.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/

Родитель: Горчица/Кетчуп

Ребенок: Mustard1, Mustard2/Ketchup1, Ketchup2

Answer 1

Попробуйте

$('.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>