Javascript 在引导选择上显示/隐藏选项？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31339145/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-23 06:33:03 来源:igfitidea点击:
Show/hide options on bootstrap-select?
提问by DiFox
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).
不久前，我试图在 bootstrap-select lib 上写一个小片段，它应该打开并隐藏父选项上单击/更改事件的一些额外选项（底部示例中的一半）。
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.
不幸的是，我的 jquery 水平不高，所以目前我只有 /showing/ 功能，没有 /hiding/ 子项和清除选择（如果选择了隐藏父项的某个子项）。如果父项上的选中箭头不显示，只显示在子项上，那就太好了。
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>Parent is: Mustard/Ketchup
父母是：芥末/番茄酱
Child is: Mustard1,Mustard2/Ketchup1,Ketchup2
孩子是：芥末1，芥末2/番茄酱1，番茄酱2
回答by Arun P Johny
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>回答by befree2j
<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>
