使用Bootstrap multip select
1.必须引用一个CSS文件,JQuery JS和两个bootstrap JS文件
1.必须引用一个CSS文件,JQuery JS和两个bootstrap JS文件
<link href="/css/ui-tooltip.css" type="text/css" rel="stylesheet" />
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-select.js"></script>
2. 当一个DropDownList Changed Index 并且PagePostBack,divHideChoice 显示(但是multiSelect不显示)
<div class="FormBlockRow" id="divHideChoice" style="display:none" >
<div class="Left30">
<asp:HiddenField ID="hfHideChoices" runat="server"/>
Hide Choices:
</div>
<div class="multiSelectDropdown">
<asp:DropDownList ID="ddlHideChoices" runat="server" data-max-options="0" multiple="" class="inputselect" CssClass="selectpicker bs-select-hidden" title="Hide Choices"></asp:DropDownList>
</div>
<br />
</div>
3. 解决办法,把DropDownList的Change Event注册到pageLoad事件中而非document.ready事件中
function initMultiSelect() {
var hideChoices = $("#<%=hfHideChoices.ClientID %>").val();
var listChoices = [];
if (hideChoices != null && hideChoices != "") {
listChoices = hideChoices.split(",");
}
$("#<%=ddlHideChoices.ClientID %>").val(listChoices);
}
function pageLoad() {
initMultiSelect();
$("#<%=ddlHideChoices.ClientID %>").change(function () {
var choices = $(this).val();
var hideChoices = $("#<%=hfHideChoices.ClientID %>").val();
if (hideChoices != null && hideChoices != "") {
var selectedCount = hideChoices.split(",").length;
var totalCount = $(this).children('option').length;
if (selectedCount + 1 == totalCount) {
alert("Notes: You cann't select all items.");
}
}
if (choices == null) {
$("#<%=hfHideChoices.ClientID %>").val("");
} else {
$("#<%=hfHideChoices.ClientID %>").val(choices.join());
}
});
$("#<%=ddl_Type.ClientID%>").change(function () {
$("#divHideChoice").hide();
if ($(this).val() == "7") {
$('.selectpicker').selectpicker('show');
$("#divHideChoice").show();
} else {
$('.selectpicker').selectpicker('hide');
}
});
if ($("#<%=ddl_Type.ClientID%>").val()=="7")
{
$('.selectpicker').selectpicker('show');
$("#divHideChoice").show();
}
}
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-select.js"></script>
2. 当一个DropDownList Changed Index 并且PagePostBack,divHideChoice 显示(但是multiSelect不显示)
<div class="FormBlockRow" id="divHideChoice" style="display:none" >
<div class="Left30">
<asp:HiddenField ID="hfHideChoices" runat="server"/>
Hide Choices:
</div>
<div class="multiSelectDropdown">
<asp:DropDownList ID="ddlHideChoices" runat="server" data-max-options="0" multiple="" class="inputselect" CssClass="selectpicker bs-select-hidden" title="Hide Choices"></asp:DropDownList>
</div>
<br />
</div>
3. 解决办法,把DropDownList的Change Event注册到pageLoad事件中而非document.ready事件中
function initMultiSelect() {
var hideChoices = $("#<%=hfHideChoices.ClientID %>").val();
var listChoices = [];
if (hideChoices != null && hideChoices != "") {
listChoices = hideChoices.split(",");
}
$("#<%=ddlHideChoices.ClientID %>").val(listChoices);
}
function pageLoad() {
initMultiSelect();
$("#<%=ddlHideChoices.ClientID %>").change(function () {
var choices = $(this).val();
var hideChoices = $("#<%=hfHideChoices.ClientID %>").val();
if (hideChoices != null && hideChoices != "") {
var selectedCount = hideChoices.split(",").length;
var totalCount = $(this).children('option').length;
if (selectedCount + 1 == totalCount) {
alert("Notes: You cann't select all items.");
}
}
if (choices == null) {
$("#<%=hfHideChoices.ClientID %>").val("");
} else {
$("#<%=hfHideChoices.ClientID %>").val(choices.join());
}
});
$("#<%=ddl_Type.ClientID%>").change(function () {
$("#divHideChoice").hide();
if ($(this).val() == "7") {
$('.selectpicker').selectpicker('show');
$("#divHideChoice").show();
} else {
$('.selectpicker').selectpicker('hide');
}
});
if ($("#<%=ddl_Type.ClientID%>").val()=="7")
{
$('.selectpicker').selectpicker('show');
$("#divHideChoice").show();
}
}