使用 Jquery /ASP 实现 bootstrap-多选复选框时出现问题

Question

我整天都在为此工作，并逐渐退回到我能找到的最基本的示例。看来我没有成功实施 Jquery。除了代码之外，我还缺少一些简单的步骤吗？ VS2019 中的导入或引用？当我阅读它时，我应该能够通过 CDN 引用我需要的一切。这是我用作示例的参考

https://www.aspsnippets.com/Articles/Multiple-Select-MultiSelect-DropDownList-with-CheckBoxes-in-ASPNet-using-jQuery.aspx

用这个度过一天后

http://davidstutz.github.io/bootstrap-multiselect/ 这似乎是所有样品制作的中心。这一切都是有道理的。这一切都编译。但出于某种原因，我的列表框看起来像普通的旧列表框，而不是所有这些链接中展示的带有复选框的精美列表。

我相信这是一些简单的参考问题。 ..我是 Jquery 新手，但不幸的是我无法在服务器端完成此任务。

示例代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="About.aspx.cs" Inherits="Sandbox.About" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css"
        rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css"
        rel="stylesheet" type="text/css" />
    <script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"
        type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('[id*=lstFruits]').multiselect({
                includeSelectAllOption: true
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">

    <asp:ListBox ID="lstFruits" runat="server" SelectionMode="Multiple">
        <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>
    <asp:Button Text="Submit" runat="server" OnClick="Submit" />
    </form>
</body>
</html>

以及后面的代码。 . .这里没有什么相关的。 . .

using System;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Sandbox
{
    public partial class About : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
           
        }
        protected void Submit(object sender, EventArgs e)
        {
            foreach (ListItem item in lstFruits.Items)
            {
                if (item != null && item.Selected)
                {
                    string Name = item.Text;
                    string Value = item.Value;
                    // write your code here to save to database
                }
            }
        }
    }
}

它应该是这样的： [![bootstrap 多选复选框][1]][1] [1]: https://i.stack.imgur.com/jrvyK.png

这是我最终的样子。 . . [![我失败的版本][2]][2] [2]: https://i.stack.imgur.com/65m6S.png

这看起来很像一个普通的列表框。 . .让我觉得我的 jquery 代码甚至没有被识别。我最初以为我有其他 css 影响它，但我也从我的项目 css 文件中删除了所有内容。

所以。 . .如果有人对我可能忘记做的事情有任何想法，我将不胜感激。

Answer 1

对于选择 ID，这是最佳做法

<script type="text/javascript">
    $(function () {
        $("#lstFruits").multiselect({
            includeSelectAllOption: true
        });
    });
</script>

如果设计不起作用，请尝试在样式标签中的下拉框中提供一些内联标签。

但我标记 jquery 是通过选择由“.class”表示的 class 名称来流畅地工作

<script type="text/javascript">
$(function () {
    $("#lstFruits").multiselect({
        includeSelectAllOption: true
    });
});

Answer 2

如我所料，这归结为一些简单的事情：

我引用外部文件的地方：

<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>

我改成了https：

通过此更改，一切正常。我不确定为什么，因为我可以浏览到 ssl 或非 ssl 地址。必须在 VS2019 或 web config 之类的某处进行设置。 . .但这就是问题的全部。

也就是说，我在这个问题上花了很长时间，我想指出的是，在 asp 中，# 引用标识符实际上在这里不起作用（它在 css参考例如）。

这有效：

$('[id*=lstFruits]').multiselect(function () {    
    includeSelectAllOption: true
})

这行不通：

$('#lstFruits').multiselect(function () {    
    includeSelectAllOption: true
})

如果添加class：

<asp:ListBox ID ="lstFruits" runat="server" class="fruit" SelectionMode="Multiple">

这有效：

$('.fruit').multiselect(function () {    
    includeSelectAllOption: true
})

至于#目标选择器。 . .如果我有一个像这样的按钮：

<button id="Button2">Click</button>

然后这个 jquery 函数将使用该目标 ID：

$(document).ready(function () {
    $("#Button2").click(function () {
      alert("Hello World");    
    });
});

但是，一旦它成为 asp 按钮

<asp:Button Text="Submit" runat="server" id="Button1" />

我需要使用：

$(document).ready(function () {
    $("[id*=Button1]").click(function () {
       alert("Hello World");    
    });
});

Answer 3

我发现这个已经晚了一天，但很高兴知道我还没有失去理智。我今天早些时候发现了另一个例子，它运行良好，由下拉列表而不是列表框驱动，无论如何我更喜欢列表框，以防其他人需要它。谢谢。

这是 link： https://www.aspsnippets.com/questions/155676/Bind-TextBox-based-on-multi-select-DropDownList-using-C-and-VBNet-in-ASPNet/

使用 Jquery /ASP 实现 bootstrap-多选复选框时出现问题

Problems implementing bootstrap-multiselect checkbox using Jquery /ASP

jquery

asp.net

bootstrap-multiselect