Флажки jQuery Multiselect не отображаются

Question

У меня есть следующий пользовательский элемент управления asp.net (ниже), где я пытаюсь реализовать функцию jQuery, Multiselect. К сожалению, я делаю что-то неправильно, так как я получаю список из четырех значений без флажков.

После загрузки этих jQuery-библиотек и таблиц стилей я добавил их в свой проект в Visual Studio2013, после чего перетащил их в файл .ASCX, поэтому я уверен, что они указывают на нужные файлы. Я пытался использовать более старые версии jQuery, и это не имело никакого значения. Этот пользовательский элемент управления является частью формы в веб-конфигурации главной страницы. Мы находимся в 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

Ваша проблема в том, как вы загружаете скрипты.

Move

<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>

, и вы должны быть хорошо идти.

Если это не сработает, проверьте, как вы настраиваете таргетинг на атрибут listbox ID.

Вместо

$('[id*=lstStores]')

должно быть

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

Answer 2

Ваш ListBox является контроллером ASP.NET с RUNAT = "сервер", так что я думаю, вы должны remplace ваш:

$('[id*=lstStores]') 

B у:

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

EDIT: Я думаю, что это ваш путь всех ваших 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> 

И это работает.