I have recently had a scenario where i have needed to set the selected=”selected” parameter of a dropdown box using JQUERY based on data from a database.
The scenario:
When the user decides to edit a job I need the current data to fill in the text boxes and other input fields. One of which is a dropdown list. I need to make sure that the selected option is the option that is saved in the database.
For example a dropdown box of job types:
<select id="jobtype"> <option value="1">Job Type 1</option> <option value="2">Job Type 2</option> <option value="3">Job Type 3</option> <option value="4">Job Type 4</option> </select>
Then the JQUERY to loop through and add the “selected” attribute to appropriate option:
$("#jobtype option").each(function(i){
if($(this).val() == data.jt){
$(this).attr("selected", "selected");
}
});
Note: data.jt is response from an $.ajax call in JSON format.
What it does:
We use the .each function to loop through all of the options within the jobtype select dropdown until the value of on of the options equals the value of data.jt.
Example:
If data.jt = 2
Then the select code would end up looking like this:
<select id="jobtype"> <option value="1">Job Type 1</option> <option value="2" selected="selected">Job Type 2</option> <option value="3">Job Type 3</option> <option value="4">Job Type 4</option> </select>
JQUERY devs release JQUERY 1.5.1 which fixes more than 50 known issues within JQUERY. This release note was posted by the JQUERY team on the 27/06/2008. The full post can be read on the JQUERY blog here: http://jquery.com/blog/2008/06/27/jquery-ui-151/
