在 asp:ListBox 上选择 Jquery 插件 - 生成多个控件答案

【问题标题】：Chosen Jquery Plugin on asp:ListBox - Multiple controls generated在 asp:ListBox 上选择 Jquery 插件 - 生成多个控件
【发布时间】：2015-01-19 17:36:41
【问题描述】：

我有一个使用选择的 Jquery 插件自定义的用户控件，如下所示

<%@ Control Language="C#" CodeBehind="ManyToMany_Edit.ascx.cs" Inherits="Blah.ManyToMany_EditField" %>
<asp:HiddenField runat="server" ID="lbltest"  />


<%--<link rel="stylesheet" href="../../Content/style.css">--%>
<link rel="stylesheet" href="../../Content/prism.css">
<link rel="stylesheet" href="../../Content/chosen.css">
<%--<style type="text/css" media="all">
/* fix rtl for demo */
.chosen-rtl .chosen-drop {
left: -9000px;
}
</style>--%>
<script src="../../Content/chosen.jquery.min.js" type="text/javascript"></script>
<script src="../../Content/chosen.jquery.js" type="text/javascript"></script>
<script src="../../Content/prism.js" type="text/javascript" charset="utf-8"></script>

<%--<asp:DropDownList ID="ddlMultiSelect" data-placeholder="Choose a Team Member…" class="chosen-select" multiple Style="width: 350px;" runat="server">--%>
<div >
<asp:ListBox  ID="ddlMultiSelect" SelectionMode="Multiple" data-placeholder="Choose …" multiple class="chosen-select"   runat="server" >

</asp:ListBox>
</div>

<form>
    <script type="text/javascript">
var config = {
'.chosen-select': {},
'.chosen-select-deselect': { allow_single_deselect: true },
'.chosen-select-no-single': { disable_search_threshold: 10 },
'.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' },
'.chosen-select-width': { width: "95%" }
}
for (var selector in config) {
    $(selector).chosen(config[selector]);
}
</script>
</form>

<header>
    <script type="text/javascript">
    $(document).ready(function () {
        $("#<%=ddlMultiSelect.ClientID %>").change(function () {
            var arr = $(this).val();
            if (typeof arr === 'object' && arr instanceof Array) {
                document.getElementById('<%=lbltest.ClientID%>').value = arr.toString();
            }
            else { document.getElementById('<%=lbltest.ClientID%>').value = ""; }
            console.log(arr);

        }
    )
});
</script>
</header>

然后我在实体框架中使用它来显示我的 Many 2 Many 编辑视图。它适用于其中一个字段，但对于另一个字段，它会生成 2 个输入框。如果我关闭选择并使用普通的列表框，它会按预期为每个字段生成一个控件。所以我认为这与Chosen有关。

截图如下

【问题讨论】：

标签： entity-framework jquery-chosen

【解决方案1】：

我移动了这个位

         <script type="text/javascript">
             var config = {
                 '.chosen-select': {},
                 '.chosen-select-deselect': { allow_single_deselect: true },
                 '.chosen-select-no-single': { disable_search_threshold: 10 },
                 '.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' },
                 '.chosen-select-width': { width: "95%" }
             }
             for (var selector in config) {
                 $(selector).chosen(config[selector]);
             }
</script>

从用户控件（Feild Template）到插入和编辑页面。配置只需要在页面加载中分配一次。现在可以了。我想现在我有一个非常好的 Many2Many 字段模板，我有时会在 nuget 上发布它。

【讨论】：