我正在尝试创建一个没有复选框的网站,而jQuery Select2似乎就是答案。现在,我无法基于多个Select2选择显示多个div。例如,如果在下拉菜单中选择了OnBase,则我想显示OnBase div,如果未选择OnBase,则将其隐藏。
Script to hide my Divs
<script>
$(document).ready(function() {
$('.selectapps').select2();
$('#CNKronos').hide();
$('#Network2').hide();
$('#Network').hide();
$('#OnBase').hide();
});
</script>
Script that only shows the div for the first selection only
<script>
$(function() {
$('#ApplicationsList').change(function(){
$('.selectapps2').hide();
$('#' + $(this).val()).show();
});
});
</script>
Select2 Dropdown
<div id="Applications" class="panel panel-primary" style="width:850px; margin:0 auto; margin-top:10px;">
<div class="panel-heading">
<h3 class="panel-title"><strong>Applications</strong></h3>
</div>
<div class="panel-body">
<table width="825" border="0" class="table table-striped">
<tbody>
<tr>
<td>
<select class="selectapps selectapps2" id="ApplicationsList" name="ApplicationsList" multiple="multiple" style="width:99%;">
<option value="CNKronos" >CNKronos</option>
<option value="Network2">Drive</option>
<option value="Network">Email</option>
<option value="OnBase">OnBase</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
</div>
DIVS
<div id="CNKronos" class="panel panel-primary selectapps2" style="width:850px; margin:0 auto; margin-top:10px;">
<div class="panel-heading">
<h3 class="panel-title"><strong>CNKronos</strong></h3>
</div>
<div class="panel-body">
<table width="825" border="0" class="table table-striped">
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="Network2" class="panel panel-primary selectapps2" style="width:850px; margin:0 auto; margin-top:10px;">
<div class="panel-heading">
<h3 class="panel-title"><strong>Drive</strong></h3>
</div>
<div class="panel-body">
<table width="825" border="0" class="table table-striped">
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="Network" class="panel panel-primary selectapps2" style="width:850px; margin:0 auto; margin-top:10px;">
<div class="panel-heading">
<h3 class="panel-title"><strong>Email</strong></h3>
</div>
<div class="panel-body">
<table width="825" border="0" class="table table-striped">
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="OnBase" class="panel panel-primary selectapps2" style="width:850px; margin:0 auto; margin-top:10px; ">
<div class="panel-heading">
<h3 class="panel-title"><strong>OnBase</strong></h3>
</div>
<div class="panel-body">
<table width="825" border="0" class="table table-striped">
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</div> '
能否请您帮助我实现这一目标?我疯了,找不到其他解决方案。
谢谢
答案 0 :(得分:0)
所有您需要的是每个输入选择器的切换功能。由于select2功能提供了一个数组作为自身值,因此您可以遍历这些值并基于其显示/隐藏每个div。这是一个示例:
<TreeView x:Name="ConfigItemTree" VerticalAlignment="Top" ItemsSource="{Binding ConfigTreeRoot}" >
<TreeView.ContextMenu>
<ContextMenu >
<MenuItem x:Name="ContextMenuItems" DisplayMemberPath="Name" />
</ContextMenu>
</TreeView.ContextMenu>
答案 1 :(得分:0)
看看您的select2小部件的文档。实际上,它为您提供了一种获取每个选定选项的方法。使用.select2('data'),它返回一个选定对象的数组。使用此代码,以下代码可以实现您想要的功能:
$(document).ready(function() {
// Create the select2
$('.selectapps').select2();
// hide the sub-panes
$('.selectapps2').hide();
// When our select2 changes...
$('#ApplicationsList').change(function(){
// ... we can get all the selected options
let selected = $(this).select2('data');
// Hide all the panes again
$('.selectapps2').hide();
// Go through the list of options
selected.forEach( function(option){
// and show the one with this id
$("#"+option.id).show()
})
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>
<div id="Applications" class="panel panel-primary" style="width:850px; margin:0 auto; margin-top:10px;">
<div class="panel-heading">
<h3 class="panel-title"><strong>Applications</strong></h3>
</div>
<div class="panel-body">
<table width="825" border="0" class="table table-striped">
<tbody>
<tr>
<td>
<select class="selectapps selectapps2" id="ApplicationsList" name="ApplicationsList" multiple="multiple" style="width:99%;">
<option value="CNKronos" >CNKronos</option>
<option value="Network2">Drive</option>
<option value="Network">Email</option>
<option value="OnBase">OnBase</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="CNKronos" class="panel panel-primary selectapps2" style="width:850px; margin:0 auto; margin-top:10px;">
<div class="panel-heading">
<h3 class="panel-title"><strong>CNKronos</strong></h3>
</div>
<div class="panel-body">
<table width="825" border="0" class="table table-striped">
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="Network2" class="panel panel-primary selectapps2" style="width:850px; margin:0 auto; margin-top:10px;">
<div class="panel-heading">
<h3 class="panel-title"><strong>Drive</strong></h3>
</div>
<div class="panel-body">
<table width="825" border="0" class="table table-striped">
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="Network" class="panel panel-primary selectapps2" style="width:850px; margin:0 auto; margin-top:10px;">
<div class="panel-heading">
<h3 class="panel-title"><strong>Email</strong></h3>
</div>
<div class="panel-body">
<table width="825" border="0" class="table table-striped">
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="OnBase" class="panel panel-primary selectapps2" style="width:850px; margin:0 auto; margin-top:10px; ">
<div class="panel-heading">
<h3 class="panel-title"><strong>OnBase</strong></h3>
</div>
<div class="panel-body">
<table width="825" border="0" class="table table-striped">
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>