I am using an ASP. NET web application and page methods to perform the Ajax calls. Using page methods means that you do not need a seperate web service, which is good if the functionality is specifically for the page. The page methods must be declared public static and use the WebMethod attribute.

Each list is given a unique ID to be able to reference them in jQuery. The intention here is to display a list of genders in the first list, which when selected populates the second select with a list of names for that gender.

You could easily replace this code to get some data from a database if required. Here is the method used to get the list of names based on the selected gender. I will be passing the Value property from the anonymous gender type through to this method to filter the list of names:.

Again I am returning an ArrayList of an anonymous type containing a list of names depending on the genderID passed into the method. Now for the fun part, hooking it all up with jQuery.

First I need to populate the gender list when the page loads:. In the successful callback from the call I then do the following:. Now the gender dropdown list is populated when the page loads. Next I need the names list to be populated when choosing a gender.

To do this I have created a JavaScript function called GetNames which accepts the genderID as a parameter:. If it is I clear the list and add an option with the text Loading names to the select list as I did with gender. This will be displayed while the Ajax call is being made to let the user know something is happening.

populate select options datatables editor in jquery - Stack Overflow

Next I use the same approach as getting the list of gender to get the list of names but I pass a JSON string through as the data property containing the selected gender ID. The successful callback works in the same way as populating the list of genders. This binds the onChange event to call the GetNames function passing through the selected gender ID. Download source Share this: The only problem is I am having trouble compiling. Have you any ideas what may be causing it?

Make sure that you are working on an AJAX Enabled WebSite. Otherwise, you may not be able to make server calls. The Webservice you create should be using the Name Space System. Services; [ScriptService] attribute has to be added. Was going to use an UpdatePanel, though it stock market cheat sheets messy when trying to use the UpdateProgress control, hence symantec stock options a variant of your code.

Forgive the lack of left brackets, they seem to have been removed, however you can guess what they would look like….

javascript - Dynamically populating Select options with jQuery - Stack Overflow

Hi, Iam new to jquery could u plz tell how to stock market intraday trading tips dropdownlist with C Generic list. Acctually m using SQL server which return me a generic list but i dont know how to handle it. With my example you need a web service jquery populate select options from database that returns the data you get from the database. Thanks for the example.

I have a requirement where I need to show the combo-box on selection of value from another combo-box. That I am able to achieve through your example above. Now I need to know two things: Why option tag not visible under select tag when I do View Source on the IE even if the values have been filled in combo-box successfully.

I need to hide the combo-box when page loads and then need to display when the comb-box is populated through Ajax call.

For showing the combo after population you could initially add a display: Show to display it. Because otherwise item would return and array with size of the total of characters in the msg. Do you know buying s&p 500 put options this happens?

This is good information but it could be better supplemented with the demo. Is there anyway to persist? Where are you using OnClick? That would fire as soon as you click on the select input. I want to know what datatypes can be returned from webservice method for Ajax calls other than arraylist and strings. Have a look here: I have also created similar kind of work in my blog to populate gridview asp.

Very Nice Tutorial, Its really helpful for me. Thanks for posting, I bookmark it. Notify me of follow-up comments by email. Notify me of new posts by best way to make money on sports betting. NET MVC jQuery MongoDB Contact Resume About me.

Populate a select dropdown list using jQuery and Ajax. Dynamic Parameters in Jenkins January 5, Sitecore Webforms for Marketers Send Email with Username and Password March 23, Fix TeamCity failing to clone or pull from Git January 13, I will be passing the Value property from the anonymous gender type through to this method trading system stochastic filter the list of names: First I need to populate optionshouse short put margin gender list when the page loads: In the successful callback from the call I then do the following: To do this I have created a JavaScript function called GetNames which accepts the genderID as a parameter: Share on Facebook Opens in new window Click to share on LinkedIn Opens in new window Click to share on Twitter Opens in new window.

Posted on February 23, by Joe in AjaxJavaScriptjQuery. Joe April 20, Hi Venkat Good tip, thanks. Joe August 14, Hi Cap Not really sure without seeing it. Have you got all the necessary using statements? AK Sabin December 30, Make sure that you are working on an AJAX Enabled WebSite. Taking it a step further, I cleaned it up, by using something like: Jonathan Stichbury December 30, Forgive the lack of left brackets, they seem to have been removed, however you can guess what they would look like….

Jayesh January 20, hi friend, i want to clear Second drop down once i m selecting first drop down. Ajay April 26, Try this.

Khizar April 28, Hi, Iam new to jquery could u plz tell how to bind dropdownlist with C Generic list. Joe May 3, Khizar My example uses an ArrayList, you can easily swap it out for a generic list. Joe August 10, Hi Asaf Where are you seeing msg. Gaurav Jain August 22, Thanks for the example. Display as undefined Do you know why this happens? Ravi November 28, Thank you… It works like a charm. Joe December 4, Jovanky Just download the source and try it for yourself.

Mar Anthony Go January 19, Thank you very much, this helped me a lot! Omm February 23, Hi Joe, Thanks for your simple and fine example. Dan February 24, Hi Joe Great work, thanks.

Auto-populating Select Boxes using jQuery & AJAX

Joe March 1, Hi Dan Would be a few ways. What are you using?

Web Forms or plain HTML? Joe March 1, Omm Where are you using OnClick? Manisha March 15, I want to know what datatypes can be returned from webservice method for Ajax calls other than arraylist and strings.

Joe March 16, Have a look here: You can return your own classes.

Hitesh Agja April 21, Nice post! Keep up good work. Soft Sunrise July 11, Very NICE AND GOOD ajax jquery database and php learning. Mahmoud June 9, thanks for your solution but when we submit these dropdown the selected values will be cleared any help please to keep selected values on submit. Add a Comment Click here to cancel reply.