您的位置:首页 > Web前端 > BootStrap

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();

        }

    }
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: