Loading ...

How to populate dropdownlist through jquery | CodeAsp.Net

How to populate dropdownlist through jquery

 /5
0 (0votes)

First of all some basic operations that might you need to do when you play with dropdown.

1. Add an option to list:

 $("<option value='0'>Select</option>").appendTo("#ddlCategory");

2. Remove all the Options from drop down:

$("#ddlCategory> option").remove();

3. Get the selected item Text:

$("#ddlCategory option:selected").text();

4. Get the selected item Value:

 $("#ddlCategory").val();

5. Set the item by Value:

$("#ddlCategory").val(2);

6. Selection change event:

$("#ddlCategory").change(function(e) 
{
//do your work
});

 and here goes populating a dropdown through jquery.

<html>
<body>
<form id="form1">
<select id="ddlCategory" ></select>
</form>
</body>
</html>

<script type="text/javascript" language="javascript">
var ddlCategory=  $("#ddlCategory");
$.ajax ({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "WebService1.asmx/GetCategoryList",
dataType: "json",
success: function(data)
{
for(i=o; i< data.d.length; i++)
{
ddlCategory.append($("<option></option>").val(data.d[i].CategoryID']).html(data.d[i].CategoryName));
});

}
});
</script>

 

 public class WebService1 : System.Web.Services.WebService
{
[WebMethod]
public IEnumerable<Category> GetCategoryList()
{
Collection<Category> categoryyList = new Collection<Category>();

categoryyList .Add(new Category(1, "ABC"));
categoryyList .Add(new Category(2, "EFG"));

return categoryyList;
}
}

 

 

Hope this will help.

Comments (9)

   
ajit
Good one..Keep it up...........
5/21/2010
 · 
by
   
mohit
nice
5/21/2010
 · 
by
   
raghav_khunger
My suggestion, instead of doing this    $.each(data.d, function()              {             $("#ddlCategory").append($("<option></option>").val(this['CategoryID']).html(this['CategoryName']));          });  You should put a loop on some variable which will hold the html for dropdown instead of looping with .append on ddlCategory. Appending in loop in DOM will hit the performance.
5/21/2010
 · 
by
   
nilact
It won't retain dropdown value across postback
5/26/2010
 · 
by
   
Shaitender
Don't use $.each(), use for(; instead. It's over ten times faster.
9/3/2010
 · 
by
   
vinay_jss
Thanks for your valuable feedback!! I will change it accordingly.
9/3/2010
 · 
by
   
vinay_jss
I have made some changes according to your valuable feedback. @Raghav sir var ddlCategory=$("#ddlCategory");
@Shaitender for(i=o; i< data.d.length; i++)
{
   ddlCategory.append($("").val(data.d[i].CategoryID']).html(data.d[i].CategoryName));
}); Thanks to all for update my skills.
9/3/2010
 · 
by
   
neel
Good post Vinay.How about response to Nil Thakkar's comment? ---> It won't retain dropdown value across postback
9/4/2010
 · 
by
   
vinay_jss
@nil thakkar On postback, each time dropdown re-populated. thats why it lossed the selected value. To retain value across postback, We can use a hidden field that hold previous selected value.1. take a hidden field on your form.<input  type="hidden" id="hdnCategoryID"/>2. on change event assign the value in hidden field$("#ddlCategory").change(function(e) {             $('#hdnCategoryID').val($("#ddlCategory").val());});3. to retain the selected value of dropdown$("#ddlCategory").val($('#hdnCategoryID').val());Please note that the last line (step 3) should written after the ajax calll completed. i.e. after dropdown populated.
9/4/2010
 · 
by

Top Posts