Pokaż/ukryj opcje na bootstrap-select?

Question

Niedawno próbuję napisać mały fragment na bootstrap-select lib, który powinien otworzyć i ukryć dodatkowe opcje zdarzenia click/change w opcji parent (połowa tego w dolnym przykładzie).

Jak powinien działać ...

Gdy użytkownik kliknie na konkretnej pozycji opcji, niektóre dodatkowe elementy z dalszymi informacjami są wyświetlane poniżej rodzica. Gdy użytkownik kliknie jeszcze raz, dodatkowe elementy powinny zostać ukryte, a elementy potomne usunięte z już wybranych opcji.

Na czym polega problem?

Niestety mój poziom jquery nie jest wysoki, więc na tę chwilę mam tylko/pokaz/funkcjonalność bez/ukrywanie/elementów podrzędnych i wyczyszczenie wybrane (jeśli wybrane zostało jakieś dziecko ukrytego rodzica). I będzie świetnie, jeśli strzałka zaznaczona na elemencie nadrzędnym nie będzie wyświetlana, tylko w przypadku dziecka.

Mój przykład

To jest mój krótki kod -

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

nadrzędna jest: Musztarda/Ketchup

dzieci to: Mustard1, Mustard2/Ketchup1, Ketchup2

Answer 1

Spróbuj

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