Question

我有以下asp.net用户控件（如下所示），我试图实现jQuery，Multiselect复选框功能。不幸的是，我做错了，因为我只获得了一个没有复选框的四个值的列表框。

下载这些jQuery库和样式表后，我将它们添加到Visual Studio2013中的项目中，然后将它们拖到.ASCX文件中，因此我非常确定它们指向正确的文件。我尝试使用旧版本的jQuery，但没有任何区别。此用户控件是主页面Web配置中表单的一部分。我们在Dot-Net 4.0上。

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="DateStoreSelector.ascx.cs" Inherits="OfficeIntranet.Controls.Warehouse.DateStoreSelector" %>

<link href="../../Styles/StyleSheet.css" rel="stylesheet" type="text/css" />
<link href="../../Forms/../Styles/SOTracking.css" rel="stylesheet" type="text/css" />
<link href="../../Styles/bootstrap-3.2.0.min.css" rel="stylesheet" type="text/css" />
<link href="../../Styles/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />

<script src="../../Scripts/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="../../Scripts/bootstrap-3.2.0.min.js" type="text/javascript"></script>
<script src="../../Scripts/bootstrap-multiselect.js" type="text/javascript"></script>

<script type="text/javascript">
    $(function () {
        $('[id*=lstStores]').multiselect({
            includeSelectAllOption: true
        });
    });
</script>

<asp:Panel runat="server" >
    <div id="itDiv" style="padding: 5px; height: 220px; width: 171px; float: left; border: 1px solid black">
        <%# Eval("FormatedDate")%>
        <hr style="border-top: 1px solid"/>
        <div runat="server">
            <%# Eval("theData")%>
        </div>
        <div>
            <asp:ListBox ID="lstStores" Width="70px" Height="104px" runat="server" SelectionMode="Multiple" >
                <asp:ListItem Text="01" Value="01"></asp:ListItem>
                <asp:ListItem Text="15" Value="15"></asp:ListItem>
                <asp:ListItem Text="24" Value="24"></asp:ListItem>
                <asp:ListItem Text="37" Value="37"></asp:ListItem>
            </asp:ListBox>
        </div>
        <div>
            <asp:Button runat="server" Text="Update" Width="125px" Height="25px" ID="selectStores" OnClick="selectStores_OnClick" ></asp:Button> 
        </div>
    </div>
</asp:Panel>

任何人都知道我在这里做错了什么以及为什么复选框不会出现？

感谢。

Answer 1

您的问题是您加载脚本的顺序。

移动

<script src="../../Scripts/jquery-2.1.3.min.js" type="text/javascript"></script>

之前的

<script src="../../Scripts/bootstrap-3.2.0.min.js" type="text/javascript"></script>

你应该好好去。

如果这不起作用，请检查您如何定位列表框ID属性。

而不是

$('[id*=lstStores]')

应该是

$("select[id$='lstStores']")

Answer 2

你的ListBox是一个带有runat =“server”的ASP.NET控制器，所以我认为你应该重新设置你的：

$('[id*=lstStores]')

通过：

$("#<%= lstStores.ClientID %>")

编辑： 我认为这是你所有js错误的路径，因为我用这个链接测试你的代码：

<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js" type="text/javascript"></script>
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>

这很有效。

jQuery Multiselect复选框不会出现

2 个答案: