的Jquery在多重下拉列表中选择

我已经把自己在一起的多个选择下拉菜单，看起来像这个名单的用户控件：的Jquery在多重下拉列表中选择

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> 
    <ContentTemplate> 
     <div id="multiTop" class="multiTop"> 
      <asp:Button ID="DropDownButton" CssClass="dropDownButton" Text="All" runat="server" /> 
     </div> 
     <div ID="multiMain" class="multiMain" style="display:none">    
      <asp:Button ID="SelectAllButton" Text="All" runat="server" CssClass="allButton" OnClick="AllButton_Click" /> 
      <asp:CheckBoxList ID="MultiCheckBox" runat="server" RepeatDirection="Vertical" AutoPostBack="true" 
      OnSelectedIndexChanged="MultiCheckBox_SelectedIndexChanged" CssClass="mutiCbl"> 
      </asp:CheckBoxList> 
     </div> 
    </ContentTemplate> 
</asp:UpdatePanel>

首先我使用的是服务器端事件来显示和隐藏“multiMain”面板（现在是div），只要DropDownButton被按下。稍后一点Css摆弄，整个事情看起来像一个下拉列表。

然而，主要的问题是，如果用户点击页面上的其他任何地方，不像真正的下拉列表，下拉部分没有消失。因此，我用一颗沉重的心转向了Jquery，这是我几乎不知道的。

我正在寻找一些jquery，当按钮被点击时会显示和隐藏div，并且当你点击任何其他地方时隐藏div。到目前为止，我想出了：

$(document).ready(function() { 
    var dropDownButton = $get('<%= DropDownButton.ClientID %>'); 
    var multiMain = $get('<%= multiMain.ClientID %>');  

    dropDownButton.click(function() {   
     if (multiMain.is(":hidden")) { 
      multiMain.slideDown("slow"); 
     } 
     else { 
      multiMain.slideUp("slow"); 
     } 
     return false; 
    }); 


    $(document).click(function() { 
     multiMain.hide();    
    }); 
    multiMain.click(function (e) {    
     e.stopPropagation(); 
    }); 
});

然而，什么也没发生的下拉按钮被点击时，或点击该页面的其余部分时，我有几个这样的多选择下拉列表上页面，我真的不知道我是如何理清事件的。有任何想法吗？

来源

2011-05-23 Matt King

你能发布你的ASPX页面生成的HTML标记吗？另外，'$ get'定义在哪里？ – 2011-05-26 07:40:32

事实证明，解决方案是从服务器端处理清单，并使用Jquery做更多的客户端。而不是试图获得控件的确切ID，这可能是困难的，因为asp.net附加的东西，一切都按类来完成。是使用代码的键位如下：

$("div.multiTop .dropDownButton").bind('click', function (e) { 
    var masterDiv = $(this).parents("div.multiMaster"); 
    var multiMain = $("div.multiMain", masterDiv);   

    if (multiMain.is(":hidden")) { 
     $("div.multiMain").hide(); 
     multiMain.show(); 
    } 
    else { 
     multiMain.hide(); 
    }   
    return false; 
});

当用户点击看起来像一个下拉列表按钮，jquery的查找所有其他降下来的页面上的div和隐藏它们，那么只能说明当前下降div。

$(".multiCbl").bind('change', function (e) { 
    var masterDiv = $(this).parents("div.multiMaster"); 
    var multiMain = $(this).parents("div.multiMain"); 
    var names = []; 

    $("input:checked", multiMain).each(function() { 
     names.push(" " + $(this).next().text()); 
    }); 

    var text = names.toString(); 

    if (text.length == 0) { 
     text = "All"; 
    } 
    else if (text.length > 29) { 
     text = text.substring(1, 29) + "..."; 
    } 
    else { 
     text = text.substring(1, text.length); 
    } 

    $(".dropDownButton", masterDiv).val(text); 
    $(".dropDownButton", masterDiv).next().val(text); 

    e.stopPropagation(); 
});

JQuery现在也被用来填充按钮文本，因为复选框被点击或取消点击。事后看来，这是一个更好的做法，而不是每次检查一个盒子时都回来。

$(document).bind('click', function() { 
    $("div.multiMain").hide(); 
}); 

$("div.multiMain").bind('click', function (e) { 
    e.stopPropagation(); 
});

当其他任何地方，但下拉div本身被点击时，所有的下拉divs被隐藏。

唯一的另一个主要变化是提醒人们按钮不会作为表单域回发！因此，当你看到“.next（）.val”时，我也在填充隐藏字段的值。当我回发时，该字段的文本值将从隐藏字段中恢复。

我希望这对其他人有用！

来源

2011-05-26 07:50:51

的Jquery在多重下拉列表中选择

回答

相关问题