Question

我正在尝试实现一个内部具有复选框的下拉列表，以便您可以轻松选择多个选项。此多选下拉列表应使用引导多选（link for that）来实现。

我遇到的问题是我为此使用的脚本不起作用，我认为这是因为我试图在子页面而不是母版页面中使用它。

MASTER.MASTER

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Master.master.cs" Inherits="ProyectoPermanencia.Presentacion.Master" %>

            <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

            <!DOCTYPE html>

            <html>
            <head runat="server">
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <link href="css/MasterStyleSheet.css" rel="stylesheet" type="text/css" />
                <link href="Content/bootstrap.min.css" rel="stylesheet" type="text/css" />


    <!--HERE IS A REFERENCE-->
                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" type="text/css" /> 



                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
                <script src="Scripts/bootstrap.min.js" type="text/javascript"></script>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
                <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



    <!--HERE IS ANOTHER REFERENCE-->
                <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.js"></script> 




                <asp:ContentPlaceHolder ID="head" runat="server">
                </asp:ContentPlaceHolder>
                <title>Sistema Permanencia</title>





            </head>
            <body>
                <form id="formPrincipal" class="container-fluid body" runat="server">
                    <asp:ScriptManager ID="scrp1" runat="server"></asp:ScriptManager>

                    <!-- Header -->
                    <div class="">
                        <header>
                            <img runat="server" src="~/imgs/logo_50años_avaras_blanco_01.png" width="260" />
                        </header>
                    </div>

        <asp:ContentPlaceHolder runat="server" ID="ContentPlaceHolderTitle">
                        </asp:ContentPlaceHolder>


                    <div class="container visible">
                        <div>
                            <asp:ContentPlaceHolder ID="ContentPlaceHolderFicha" runat="server">
                            </asp:ContentPlaceHolder>
                        </div>

                        <div>
                            <asp:ContentPlaceHolder ID="ContentPlaceHolderGlobal" runat="server">
                            </asp:ContentPlaceHolder>
                        </div>


                    </div>


                </form>


            </body>
            </html>

VISIONGLOBAL.ASPX ，在这里我要使用此下拉列表

<%@ Page Title="" Language="C#" MasterPageFile="~/Master.Master" AutoEventWireup="true" CodeBehind="VisionGlobal.aspx.cs" Inherits="ProyectoPermanencia.Presentacion.VisionGlobal" %>

        <asp:Content ContentPlaceHolderID="ContentPlaceHolderTitle" runat="server">
            <asp:Label runat="server">
                <h3 style="color:azure"> Visión Global  </h3>
            </asp:Label>
        </asp:Content>
        <asp:Content ID="ContentGlobal" ContentPlaceHolderID="ContentPlaceHolderGlobal" runat="server">
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <div class="container" style="font-size: small">
                        <div class="row">

                            <div class="jumbotron modal-content col-md-4" style="height: 150px; padding: 5px; padding-right: 0px; box-shadow: none; box-sizing: border-box; margin: 0px; border-radius: 2px; border-left: 5px solid rgb(252,173,24); border-right: 5px solid rgb(252,173,24); box-shadow: none;">






    <!--THIS LIST BELOW IS THE ONE THAT SHOULD BECOME A DROPDOWN LIST WITH CHECKBOXES-->
                                    <div id="Carrera pl-1" class="col-md-3" >
                                        <div class="form row align-items-center">
                                            <h5>Carrera: </h5>
                                            <!--<asp:Button ID="Button1" runat="server" Text="Seleccionar" Font-Size="Small" CssClass="btn btn-sm btn-warning ml-4" OnClientClick="ddlEscuelas_SelectedIndexChanged" />-->
                                            <asp:ListBox runat="server" ID="lstBoxTest" SelectionMode="Multiple">
                                                <asp:ListItem Text="Red" Value="0"></asp:ListItem>
                                                <asp:ListItem Text="Green" Value="1"></asp:ListItem>
                                                <asp:ListItem Text="Yellow" Value="2"></asp:ListItem>
                                                <asp:ListItem Text="Blue" Value="3"></asp:ListItem>
                                                <asp:ListItem Text="Black" Value="4"></asp:ListItem>
                                            </asp:ListBox>
                                            </div>
                                    </div>


                                    </div>
                                    <ajaxToolkit:ModalPopupExtender ID="mpe" BehaviorID="mpeID" runat="server" TargetControlID="btnBuscarCarreras"
                                        PopupControlID="Panel1" OkControlID="OKButton" />
                                </div>
                            </div>




                        </div>

                    <!--BELOW IS THE SCRIPT THAT SHOULD TURN THE LISTBOX INTO A DROPDOWN LIST WITH CHECKBOXES-->
                    <script type="text/javascript">
                    $(function () {
                        $('#lstBoxTest').multiselect({
                            includeSelectAllOption:true
                        })
                    });
                </script>

                </ContentTemplate>
            </asp:UpdatePanel>
        </asp:Content>

我一直在关注此this的youtube教程，甚至尝试过其他类型的列表，但问题似乎出在我如何实现JS而不是我正在使用的“插件”上

我进行了很多研究，但是还没有找到解决方案

编辑：正在显示列表，但脚本不起作用，所以我只看到一个列表框

ASP.Net页

0 个答案: