Thursday, March 31, 2011

A guide to select option elements using jQuery

A guide to select option elements using jQuery


Basics selection
Select element by id : $("#elementid")
Select all select elements : $("select")
Select all select elements by class : $("select.classname")
Select all options from a select element : $("#elementid option")

Filters

Select the first option : $("#elementid option:first")
Select the last option : $("#elementid option:last")
Select the option at a particular index (variant 1) : $("#elementid option:eq(2)")
Select all options that have a value attribute set : $("#elementid option[value]")
Select element by name : $("select[name=elementname]")

Execute a function on each matched element
$("#elementid option").each(function() {
alert("hey raj"); })

Number of matched select elements : $("select").size()
Number of options in a particular select element : $("#elementid option").size()
Select an option at a particular index (variant 2) : $("#elementid option").eq(1)
Get the index of the selected option (variant 1) : $("#elementid option").index($("#elementid option:selected")))
Add a class to matched select element : $("#elementid").addClass("inputs")

Remove a class from matched select element : $("#elementid").removeClass("inputs")

Get inner HTML of matched select : $("#elementid").html()
Remove all options from matched select : $("#elementid").html("")
Get the selected text of matched select : $("#elementid option:selected").text()
Set the text of a matched option : $("#elementid option:eq(2)").text("Amy")
Get the selected value of matched select : $("#elementid").val()

Add options to the end of select element : $("#elementid").append("")
Add options to the start of select element : $("#elementid").prepend("")

Getting values when an option is selected
$("#elementid").change(function()
{ alert($(this).val());
alert($(this).children("option:selected").text()); })

To eleminate the first option
if ($('#elementid option').index($('#elementid option:selected')) != 0)
{ }

No comments:

Post a Comment