Note: elementid refers to the actual id of the select element. elementname refers to the actual name
of the select element.
e.g. <select id = “elementid” name = “elementname”></select>
Selecting an element(s) for further information refer to jQuery API Selectors
Basics:
Select element by id $(“#elementid”)
Select all select elements $(“select”)
Select all select elements by class $(“select.classname”)
Hierarchy:
Select all options from a select element $(“#elementid option”)
Basic 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)”)
Attribute Filters:
Select all options that have a value attribute set $(“#elementid option[value]”)
Select element by name $(“select[name=elementname]”)
Select the selected option $(“#elementid option:selected”)
jQuery core functionality, for further information refer to jQuery API Core
jQuery Object Accessors:
Execute a function on each matched element
e.g. $(“#elementid option”).each(function() {
alert(“I am an option of #elementid”);
})
Number of matched select elements
e.g. $(“select”).size() returns number of select elements on a page
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")))
Select attributes, for further information refer to jQuery API Attributes
Attr:
Select an attribute from matched select element e.g. select name attribute $(“#elementid”).attr(“name”)
Set an attribute for matched select element e.g. set title $(“#elementid”).attr(“title”, “myselect”)
Remove an attribute from matched select e.g. remove title element $(“#elementid”).removeAttr(“title”)
Class:
Add a class to matched select element $(“#elementid”).addClass(“inputs”)
Remove a class from matched select element $(“#elementid”).removeClass(“inputs”)
HTML:
Get inner HTML of matched select $(“#elementid”).html()
Remove all options from matched select $(“#elementid”).html(“”)
Set all new options for matched select e.g.
$("#elementid").html("<option value='1'>Some oranges</option><option value='2'>More Oranges</option><option value='3'>Even more oranges</option>")
Text:
Get the text of matched option e.g. $(“#elementid option:first”).text()
Get the selected text of matched select Returns text value of selected option $(“#elementid option:selected”).text()
Remove the text of matched option e.g. $(“#elementid option:last”).text(“”)
Set the text of a matched option e.g. $(“#elementid option:eq(2)”).text(“Purple”)
Value:
Get the value of the matched option item e.g. $(“#elementid option:first”).val()
Get the selected value of matched select Returns value attribute of selected option $(“#elementid”).val()
Set the value of a matched option e.g. $(“#elementid option:eq(2)”).val(“7”)
Set the selected element based upon value i.e. Sets the selected option to option with value 7
e.g. $(“#elementid”).val(“7”)
Set the selected element based upon text e.g.
$("#elementid").val("Oranges").attr("selected", "selected")
Traversing select attributes, for further information refer to jQuery API Traversing
Finding:
Get the index of the selected option (variant 2) $("#elementid option:selected").prevAll().size()
Manipulating select attributes, for further information refer to jQuery API Manipulation
Inserting Inside:
Add options to the end of select element
e.g. $("#elementid").append("<option
value='1'>Apples</option>")
Add options to the start of select element
e.g. $("#elementid").prepend("<option
value='0'>Before Apples</option>")
Inserting Outside:
Add options after selected index
e.g. $("#elementid option:eq(0)").after("<option
value='4'>Some pears</option>"
Add options before selected index
e.g. $("#elementid option:eq(3)").before("<option
value='5'>Some apricots</option>")
Replacing:
Replace items at a certain index
e.g. $("#elementid
option:eq(1)").replaceWith("<option
value='2'>Some apples</option>")
Removing:
Remove option at specified index $("#elementid option:eq(0)").remove()
Remove first option $("#elementid option:first").remove()
Remove last option $("#elementid option:last").remove()
Select element events, for further information refer to jQuery API Events
Event Helpers:
Function to call when an option is selected $("#elementid").change(function() {})
Getting values when an option is selected
$("#elementid").change(function() {
alert($(this).val());
alert($(this).children("option:selected").text());
})
Select form submission, for further information refer to jQuery API AJAX
Event Helpers:
Serialize select element so it can be submitted or $("#elementid").serialize()
passed in URL Returns something like this: "elementname=1"