【问题标题】:How do I get the jquery script "chosen" to work in asp.net如何让 jquery 脚本“选择”在 asp.net 中工作
【发布时间】:2021-05-14 09:38:02
【问题描述】:

我有这个代码:

<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并且脚本不起作用,我试图搜索,但我发现的一切都无法解决它,请有人帮忙。

【问题讨论】:

    标签: javascript asp.net jquery-chosen


    【解决方案1】:

    我认为的问题。

    1. 文件中没有chosen.min.js。有chosen.jquery.min.js 和其他一些。
    2. 如果您使用选择的插件,AutoPostBack="true" 将不起作用,因为该插件重新设计了原来的控制女巫现在是隐藏的。您还使用SelectionMode="Multiple",因此如果自动回发在每次点击时都有效,那么您将获得回发,这不是网络的最佳体验。
    3. 您不包括选择需要工作的jQuery library
    4. 首选CssClass 而不是class。两者都有效,但对于 asp.net 控件,CssClass 是避免错误的正确方法。

    如何查找错误。右键单击页面打开浏览器调试工具,在打开菜单上选择Inspect,然后打开Console,看看你有什么错误并从那里获取。

    参考

    Chosen documentation
    Chosen downloads

    工作示例

    我创建了一个最小示例并对其进行测试并运行。

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

    【讨论】:

    • 谢谢,我会看到所有这些
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-04-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-04-20
    相关资源
    最近更新 更多