Almost daily I work with lists, be it dropdown, checkbox or radio selections. I need to select values, submit selections, hide/show containers depending on the selection etc.
I tend to forget all these cool jQuery notations that make every programmers life easier. How nice would it be to have a little cheat sheet? So I decided to summarize my findings (and share them with you).
Obviously jQuery is powerful and gives you a multitude of possibilities so this list is neither exhaustive nor covers all possible application scenarios. Mix, match, combine and extend the samples as you wish and feel free to post your additional solutions in the comments section.
See the test page.
Dropdown
I'm using the following sample list:
Get value of selected item
Pure and simple, despite what you might read in other tutorials:
alert("Selected value: " + $("#ddlCategories").val());
Change text of a particular item
Let's target item with value 'videos':
$("#ddlCategories option[value='videos']").text("Videos and tapes");
Change color of a particular item
This could be useful to show that the category is currently unavailable or a certain item is out of stock.
$("#ddlCategories option[value='videos']").css("color", "#CCC");
Get number of options
Don't forget to subtract options that don't count, e.g. the empty "- Select a category -" option.
alert("Number of options: " + ($("#ddlCategories option").length - 1));
Set a particular option
Set the option 'videos' to be the selected item.
$("#ddlCategories option[value='videos']").attr("selected", "selected");
Checkboxes
Our sample checkbox list:
None
Books
Videos
DVDs
Check all items in the checkbox list
This could be invoked e.g. through a link named 'Check all'.
$("input[name='chkCategories']").attr("checked","checked");
Uncheck all items in the checkbox list
Same here, uncheck all, a very common requirement.
$("input[name='chkCategories']").removeAttr("checked");
Make the second item being checked
List is zero-based, so the second item is nth(1) ;)
$("input[name='chkCategories']:nth(1)").attr("checked","checked");
Show the value of each checked item (requires a container!)
In this case we simply alert the value, but we could might as well write it to another output field, container or whatever you may wish.
$('#chkCategoriesContainer :checkbox:checked').each(function() {
alert($(this).val());
//$('#outputField').append(', '+$(this).val());
});
Radio
Our sample list again:
None
Books
Videos
DVDs
Get value of checked item
alert("Selected value: " + $("input[name='rdoCategories']:checked").val());
Append item to container
The item will be added to the DOM and is available to jQuery immediately.
$('#rdoCategoriesContainer').append('Audio tapes
');