在bootstrap-select上显示/隐藏选项？

Question

不久之前，我尝试编写一个小段落关于bootstrap-select库，该库应在单击/更改父选项的事件时打开和隐藏一些额外的选项（在下面的示例中的一半）。

它应该如何工作...

当用户单击特定选项时，一些额外的带有更多附加信息的项目会显示在父级下方。当用户再次单击时，额外的项目应该被隐藏，并且已选择选项中的子项已清除。

问题是什么？

不幸的是，我的jquery水平不高，因此目前只有/showing/功能而没有/hiding/子项和清除所选内容（如果已选择了某个隐藏父项的子项）。如果父项上的已选箭头不可见，而仅在子项上可见将是很好的功能。

我的例子

这是我的简短代码 -

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

父元素是：芥末 / 番茄酱

子元素是：芥末1、芥末2 / 番茄酱1、番茄酱2

- DiFox

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>

- Arun P Johny

---

哇，你是魔法师。非常感谢，那正是我需要的 =) 我非常感激。抱歉我的冒昧，这个代码里真的没有在父选项上显示“已选中”图标吗？那不是很重要，但是会很酷 =)再次感谢你。 - DiFox

Answer 2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $("#list li").click(function() {
            var selected = $(this).attr('id').toString();
            switch (selected) {
                case "listItem1":
                    element1.style.display = 'inline-block';
                    element2.style.display = 'none';
                    element3.style.display = 'none';
                    element4.style.display = 'none';

                    image1.style.display = 'inline-block';
                    image2.style.display = 'none';
                    image3.style.display = 'none';
                    image4.style.display = 'none';

                    break;
                case "listItem2":
                    element2.style.display = 'inline-block';
                    element1.style.display = 'none';
                    element3.style.display = 'none';
                    element4.style.display = 'none';

                    image2.style.display = 'inline-block';
                    image1.style.display = 'none';
                    image3.style.display = 'none';
                    image4.style.display = 'none';
                    break;
                case "listItem3":
                    element3.style.display = 'inline-block';
                    element2.style.display = 'none';
                    element1.style.display = 'none';
                    element4.style.display = 'none';

                    image3.style.display = 'inline-block';
                    image2.style.display = 'none';
                    image1.style.display = 'none';
                    image4.style.display = 'none';
                    break;
                case "listItem4":
                    element4.style.display = 'inline-block';
                    element2.style.display = 'none';
                    element1.style.display = 'none';
                    element3.style.display = 'none';

                    image4.style.display = 'inline-block';
                    image2.style.display = 'none';
                    image3.style.display = 'none';
                    image1.style.display = 'none';
                    break;
            }
        });
    });
</script>

<div id="listItems">
    <ul id="list">
        <li id="listItem1">ITEM 1</li>
        <li id="listItem2">ITEM 2</li>
        <li id="listItem3">ITEM 3</li>
        <li id="listItem4">ITEM 4</li>
    </ul>
</div>


<div id="linkedElements">
    <div id="element1" style="display: none;">ITEM 1</div>
    <div id="element2" style="display: none;">ITEM 2</div>
    <div id="element3" style="display: none;">ITEM 3</div>
    <div id="element4">ITEM 4</div>
</div>

<div id="testImages">
    <div id="linkedImages">
        <div id="image1" style="display: none;">
            <img src="images/Hydrangeas.jpg" width="10%" height="20%" />
        </div>
        <div id="image2" style="display: none;">
            <img src="images/Jellyfish.jpg" width="10%" height="20%" />
        </div>
        <div id="image3" style="display: none;">
            <img src="images/Koala.jpg" width="10%" height="20%" />
        </div>
        <div id="image4">
            <img src="images/Lighthouse.jpg" width="10%" height="20%" />
        </div>
    </div>

- befree2j