Bootstrap multiSelect 在页面POSTBack后不显示
2017-03-07 16:48
155 查看
使用Bootstrap multip select
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();
}
}
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();
}
}
相关文章推荐
- 页面一postback,它就显示页面的最顶端,怎样让它定位在某一位置?
- 数据库里面内容在web页面select标签中显示
- Bootstrap multiselect多选联动的实现
- bootstrap-multiselect.js如何动态更新select里的数据
- Bootstrap使用Javascript显示模态框后页面上移
- 页面一postback,它就显示页面的最顶端,怎样让它定位在某一位置?
- Bootstrap多选插件:Bootstrap Multiselect
- bootstrap multiselect两大组件
- JS组件中bootstrap multiselect两大组件较量
- 解决bootstrap中模态框显示后页面抖动的问题
- 在JSP页面中用select下拉列表来显示List列表的方式
- 火狐打开本地bootstrap页面,小图标无法正常显示问题
- Bootstrap Flat UI的select下拉框显示问题解决
- 一周乱弹(3-18 bootstrap模态框表单提交、jsp页面获取项目路径、bootstrap三级导航菜单、css是否显示属性)
- JS组件系列——两种bootstrap multiselect组件大比拼
- dwr返回list接收到页面select显示
- BootStrap tabs标签 使用fade效果首次加载页面不能显示内容
- JQuery 常用积累(四)Bootstrap Multiselect
- DBGridEh-在指示列显示复选框:gioShowRowselCheckboxesEh、dgMultiSelect
- bootstrap页面布局和页面中的日历显示