Show/hide bootstrap-select 选项?
Show/hide options on bootstrap-select?
不久前我试图在 bootstrap-select lib 上写一个小片段,它应该在 parent 选项上打开和隐藏 click/change 事件的一些额外选项(其中一半在底部示例)。
它应该如何工作...
当用户点击特定的选项时,parent 下方会显示一些带有更多附加信息的附加项。当用户再次单击时,应隐藏额外的项目,并从已选择的选项中清除 child 项目。
问题是什么?
不幸的是我的 jquery 水平不高,所以目前我只有 /showing/ 功能没有 /hiding/ child 项目和清除选择(如果某些 child 的隐藏 parent 被选中)。如果 parent 项上的选中箭头不显示,仅在 child 上显示,那就太好了。
我的例子
这是我的短代码 -
$('.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 是:Mustard/Ketchup
Child 是:芥末酱 1,Mustard2/Ketchup1,番茄酱 2
尝试
$('.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>
<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>
不久前我试图在 bootstrap-select lib 上写一个小片段,它应该在 parent 选项上打开和隐藏 click/change 事件的一些额外选项(其中一半在底部示例)。
它应该如何工作...
当用户点击特定的选项时,parent 下方会显示一些带有更多附加信息的附加项。当用户再次单击时,应隐藏额外的项目,并从已选择的选项中清除 child 项目。
问题是什么?
不幸的是我的 jquery 水平不高,所以目前我只有 /showing/ 功能没有 /hiding/ child 项目和清除选择(如果某些 child 的隐藏 parent 被选中)。如果 parent 项上的选中箭头不显示,仅在 child 上显示,那就太好了。
我的例子
这是我的短代码 -
$('.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 是:Mustard/Ketchup
Child 是:芥末酱 1,Mustard2/Ketchup1,番茄酱 2
尝试
$('.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>
<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>