当我选择“全部”时,如何禁用选择框中的所有项目使用select2 jquery的项目

时间:2014-12-16 08:54:15

标签: javascript jquery asp.net

我使用select2 jquery在asp.net中工作。在我的选择框中我有10个项目,包括'ALL'。 我的要求是当我选择ALL项目时,必须禁用其余项目,当我删除ALL标签时,应启用整个项目。 http://ivaynberg.github.io/select2/     我的jquery写在下面。

 $(document).ready(function () {
    $("#select1").select2({
        placeholder: 'Find and Select Books' 
     }).on("change", function (e) {
           alert(e.val)
    });
});

请任何人帮助我????

html标记:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="header1" runat="server">
<title>JQuery Select2 Plug-in</title>
<script type="text/javascript"   src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="D:/DOTNET/ITS_GOOGLE_CHART_TABS_ListBOX/Scripts/select2- 3.4.1/select2.js"></script>
<link href="D:/DOTNET/ITS_GOOGLE_CHART_TABS_ListBOX/Scripts/select2-3.4.1/select2.css"  rel="stylesheet"/>

 </head>
 <body>
<form runat="server">
<select id="select1" runat="server" datasourceid="ds1" datatextfield="emp_name" multiple="true" style="width:300px"/>
<asp:SqlDataSource ID="ds1" runat="server" ConnectionString="<%$ connectionstrings:constr %>" SelectCommand="select top 10 * from emp" />

  </form>
</body>
<script type="text/javascript">
$(document).ready(function () {
    $("#select1").select2({
        placeholder: 'Find and Select Books' 

     }).on("change", function (e) {

        alert(e.val)
    });

});


</script>
</html>

  C# code:
  select1.Items.Insert(0, new ListItem("ALL", "ALL"));

1 个答案:

答案 0 :(得分:0)

而不是在点击All时禁用这些项目,您可以select all the values。代码在这里:

$("#e1").select2();
$("#e1").on("change", function(e) {
    var selected = e.val;
    if ($.inArray("all", selected) !== -1) {
        var id = "e1"
        var element = $("#" + id);
        var selected = [];
        element.find("option").each(function(i, e) {
            if($(e).attr("value")=="all")
                selected[selected.length] = $(e).attr("value");
        });
        element.select2("val", selected);
    }
});

和Jsfiddle链接是http://jsfiddle.net/jEADR/734/。 希望它有所帮助...

礼貌:@MarcusAsplund