如何讓 jquery 腳本“選擇”在 asp.net 中工作

Question

我有這個代碼：

<script type="text/javascript" src="../Scripts/chosen.min.js" ></script>

[...]

<asp:ListBox class="chosen-select" ID="lbCategory" runat="server" AutoPostBack="true" DataSourceID="SqlDataSourceDropDownListCategory" 
SelectionMode="Multiple" Width="200px" DataTextField="Name" DataValueField="IdCategory"></asp:ListBox>

<script>
    $(".chosen-select").chosen();
</script>

我在我寫的路徑中有js，腳本不起作用，我試圖搜索，但我發現的一切都沒有解決它，請有人幫忙。

Answer 1

我認為的問題。

1. 文件中沒有chosen.min.js 。 有chosen.jquery.min.js和其他一些。
2. 如果您使用所選插件，則AutoPostBack="true"將不起作用，因為該插件重新設計了原來的控制女巫現在是隱藏的。 此外，您使用SelectionMode="Multiple" ，因此如果自動回發在每次點擊時都有效，那么您將獲得回發，這不是 web 的最佳體驗。
3. 您不包括選擇需要工作的jQuery library 。
4. 更喜歡CssClass而不是class 。 兩者都有效，但對於 asp.net 控件， CssClass是避免錯誤的正確方法。

如何找到錯誤。 通過右鍵單擊頁面打開瀏覽器調試工具，在打開菜單 select Inspect ，然后打開Console ，看看你有什么錯誤並從那里獲取。

參考

選擇的文件
選擇下載

工作示例

我創建了一個最小的示例並對其進行測試並可以正常工作。

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript" src="/js/jQuery/Chosen/chosen.jquery.js " ></script>
<link rel="stylesheet" href="/js/jQuery/Chosen/chosen.css" />               

<asp:ListBox ID="lstCategoryType" runat="server" CssClass="chosen-select"  SelectionMode="Multiple" Width="200px">
    <asp:ListItem Text="Option 1" Value="1"></asp:ListItem>
    <asp:ListItem Text="Option 2" Value="2"></asp:ListItem>
    <asp:ListItem Text="Option 3" Value="3"></asp:ListItem>
    <asp:ListItem Text="Option 4" Value="4"></asp:ListItem>
</asp:ListBox>

<script>
    jQuery(document).ready(function(){
        jQuery(".chosen-select").chosen();    
    });
</script>