我正在开发一个 ASP.Net 网页，它将使用 jQuery Dropdown Checklist ( http://code.google.com/p/dropdown-check-list/ )。我对 JavaScript 相当缺乏经验，对 jQuery 完全陌生。

基本上，我的问题是:如何从服务器端更新 jQuery DropdownChecklist 中的选定项目？

注意:有关解决方案的详细信息，请滚动到问题的底部。

这里有一些背景知识可以让您更好地了解我在做什么...

我有一个 jQuery DropdownChecklist，它在页面加载时被填充。当用户在 DropdownChecklist 中选择一个项目时，选择的值被收集并存储在一个隐藏的输入字段中，然后执行回发，这允许服务器更新服务器控件。这部分正在运行。

现在，这是我的问题。这个服务器控件实际上是一个用户控件，对于 DropdownChecklist 中的每个选定项目都有一个“删除”按钮。单击“删除”按钮时，应该会导致取消选择 jQuery DropdownChecklist 中的关联项。所以，到目前为止，我还没有想出如何做到这一点。

下面是一些相关的代码片段:

这是标记...

<asp:ScriptManager ID="smScriptMgr" runat="server" />
<table>
     <tr>
          <td>
               <select id="s1" multiple="true" runat="server" />
          </td>
     </tr>
     <tr>
          <td>
               <asp:UpdatePanel ID="UP1" runat="server">
                    <ContentTemplate>
                         <input id="inpHide" type="hidden" runat="server" />
                         <uc1:SelectedFilterBox ID="sfbFilters" runat="server" Width="200" />
                    </ContentTemplate>
               </asp:UpdatePanel>
          </td>
     </tr>
</table>

这是 JavaScript...

function DoPostback() {
 __doPostBack('UP1', '');
};

$(function () {
 $("#s1").dropdownchecklist({ forceMultiple: true, width: 200,  textFormatFunction: function() {
        return "Filters:";
        }
 });

 $('#s1').change(function () {
  var values = $(this).val();
  document.getElementById("inpHide").value = values;
  DoPostback();
 });
});

这是用户控件的标记...

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="SelectedFilterBox.ascx.vb"
    Inherits="SelectedFilterBox.SelectedFilterBox" %>

<div>
    <asp:Table ID="tblFilters" runat="server" Width="200">
        <asp:TableRow>
            <asp:TableCell>
                <asp:Repeater ID="rpFilters" runat="server" Visible="false">
                    <ItemTemplate>
                        <table class="selectedFilter">
                            <tr>
                                <td class="selectedFilterLeft">
                                    <%# Eval("filterName")%>
                                </td>
                                <td class="selectedFilterRight" align="right">
                                    <asp:ImageButton ID="ibRemove" runat="server" ImageUrl="~/images/delete.gif" CommandArgument='<%#Eval("filterName") %>' OnCommand="ibRemove_Click" />
                                </td>
                            </tr>
                        </table>
                    </ItemTemplate>
                </asp:Repeater>
            </asp:TableCell>
        </asp:TableRow>
    </asp:Table>
</div>

这是代码隐藏的一些相关部分...

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

   If Not IsPostBack Then
      'populate dropdown checklist
      s1.Items.Add("Filter A")
      s1.Items.Add("Filter B")
      s1.Items.Add("Filter C")
   Else
      'update filters based on contents of hidden input field
      UpdateFilters(inpHide.Value)
   End If

End Sub

Private Sub UpdateFilters(ByVal filters As String)
   Dim Filter() As String = Split(filters, ",")
   Dim Index As Integer = 0

   'clear existing filters
   sfbFilters.Clear()

   'loop through adding filters based on supplied string
   For Each str As String In Filter
      sfbFilters.Add(str, Index.ToString())
      Index += 1
   Next str
End Sub

'this event occurs when a Remove button is clicked
Protected Sub sfbFilters_FilterChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles sfbFilters.FilterChanged
   'update hidden input field
   inpHide.Value = UpdateHiddenField()

   'update label, listing (filter, value) pairs
   UpdateFilterValueSets()
End Sub

这是一个 JavaScript 函数，可以执行我想要的操作...

function DeselectFilter(targetString){
  $("#s1 option").each(function(){
      if($(this).text() === targetString) $(this).attr("selected", "");
  });
  $("#s1").dropdownchecklist("refresh");
};

但是，我不确定是否是从 onClientClick 事件中调用它。这看起来对吗？

<asp:ImageButton ID="ibRemove" runat="server" ImageUrl="~/images/delete.gif" CommandArgument='<%#Eval("filterName") %>' OnCommand="ibRemove_Click" OnClientClick='DeselectFilter("<%#Eval("filterName") %>");' />

在评论中反复讨论后，这是有效的解决方案...

<a onclick='DeselectFilter("<%#Eval("filterName") %>");'>
   <asp:ImageButton ID="ibRemove" runat="server" ImageUrl="~/images/delete.gif" CommandArgument='<%#Eval("filterName") %>' OnCommand="ibRemove_Click" />
</a>

我们确定最简单的解决方案是从客户端调用 JavaScript 函数，而不是尝试从服务器端调用。 ImageButton 确实有一个 onClientClick 事件，但由于某种原因它不起作用。然而，将 ImageButton 包装在客户端 anchor 标记中并使用其 onclick 事件确实很有魅力。

谢谢，Coding Gorilla , 感谢您的帮助。

最佳答案

所以通过评论来回反复，解决方案原来是将取消选择过程移动到客户端，并在单击控件时使用 javascript 和 jquery 取消选择项目。

关于javascript - 如何从服务器端更新 jQuery DropdownChecklist？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4146214/