posted 5/21/2010 by Vinay Gupta
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; }}
ABC EFG
Hope this will help.
nice
Good one..
Keep it up...........
It won't retain dropdown value across postback :)
Don't use $.each(), use for(;;) instead. It's over ten times faster.
Good post Vinay.
How about response to Nil Thakkar's comment? ---> It won't retain dropdown value across postback :)
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.
Thanks for your valuable feedback!! I will change it accordingly.
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.
@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.
What kind of email newsletter would you prefer to receive from CodeAsp.Net?18
