short time ago trying write little snippet on bootstrap-select lib, should open , hide options on click/change event on parent option (half of in bottom example).
how should work...
when user clicks on specific option item, items more additional information showing below parent. when user clicks 1 more time, items should hidden , child items cleared selected options.
what problem?
unfortunately level of jquery isn't high, moment have /showing/ functionality without /hiding/ child items , clearing selected (if child of hided parent selected). , great if checked arrow on parent item not showing, on child.
my example
this 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>parent is: mustard/ketchup
child is: mustard1,mustard2/ketchup1,ketchup2
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>
Comments
Post a Comment