Subscribe in a readerBookmark This
Load Drop Down with jQuery
By: Chris Missal
Page 1
This tutorial just shows sweet jQuery capabilities. The following code shows how you can load a page with no items in a drop down and use the jQuery AJAX methods to populate it.
First thing you'll want to do is load your jQuery framework into the page. After downloading jQuery, insert the following line of code into the head element of your document.
<script type="text/javascript" src="jquery.js"></script>
Now you're ready to use the jQuery functionality on your page. It's very simple. This code snippet shows the body of our main logic to load the dynamic data. This script block can be placed in the head also. Ideally, I'd place it directly below the above code line.
<script type="text/javascript">
$(document).ready(function(){
//Our function will go here
});
</script">
Further down in our HTML page, we'll add the select element and give it a unique id that we can call later.
<select id="dd_state_list"></select>
In this example, I'm loading a list of states. Normally this data wouldn't change, but assume that it is a list of states that this current user has visited. Therefore, for each user, the list may be different.