How to disable all items in select box when i am selecting 'ALL' item using select2 jquery
Question
I am working in asp.net using select2 jquery. in my select box i have 10 items including 'ALL'. my requirement is when i selected the ALL item , rest of the items must be disabled, when i remove the ALL tag, whole item should enabled. http://ivaynberg.github.io/select2/ my jquery is written below.
$(document).ready(function () {
$("#select1").select2({
placeholder: 'Find and Select Books'
}).on("change", function (e) {
alert(e.val)
});
});
pls anyone help me????
html markup:
<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 answers
solution1
0 ACCPTED 2014-12-16 09:19:57
Rather than disabling the items on clicking All you can select all the values .The code is here :
$("#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);
}
});
and the Jsfiddle link is http://jsfiddle.net/jEADR/734/ . hope it helps ...
courtesy: @MarcusAsplund
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.