【问题标题】:How to use multi select dropdown list asp net如何使用多选下拉列表asp net
【发布时间】:2019-11-06 18:04:29
【问题描述】:

我刚刚下载了多选下拉列表,但我无法给出正确的设计。我不知道在我的页面中将链接和脚本放在哪里。

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">


    <asp:ListBox ID="ListBox1" runat="server">
        <asp:ListItem Text="Mango" Value="1" />
        <asp:ListItem Text="Apple" Value="2" />
        <asp:ListItem Text="Banana" Value="3" />
        <asp:ListItem Text="Guava" Value="4" />
        <asp:ListItem Text="Orange" Value="5" />
    </asp:ListBox>


    <!-- Include Twitter Bootstrap and jQuery: -->
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>

    <!-- Include the plugin's CSS and JS: -->
    <script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
    <link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/>


    <!-- Initialize the plugin: -->
    <script type="text/javascript">
        $(document).ready(function() {
            $('#example-getting-started').multiselect();
        });
    </script>



</asp:Content>

【问题讨论】:

    标签: javascript css asp.net twitter-bootstrap


    【解决方案1】:

    您需要将 id 从 example-getting-started 更改为 ListBox1

    <script type="text/javascript">
            $(document).ready(function() {
                $('#ListBox1').multiselect();
            });
        </script>
    

    【讨论】:

    • 我改变了它,但我仍然有一个简单的列表框一样的输出
    • 没有。我认为是来源: href="css/bootstrap-multiselect.css" 我的项目中没有该路径。我安装了带有 nugget 包的 Bootstrap 多选,任何想法如何正确使用它?
    • 您是否尝试过 CDN url 进行测试? cdnjs.com/libraries/bootstrap-multiselect
    • ListBox 上可能需要ClientIDMode="Static"
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-01-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多