jQuery – Select Element Cheat Sheet (PDF) - Awardspace

jQuery – Select element cheat sheet 

Note: elementid refers to the actual id of the select element. elementname refers to the actual name 

of the select element. 

e.g. 

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]”) 

Form Filters: 

Select the selected option $(“#elementid option:selected”) 

jQuery – Select element cheat sheet Copyright 2009 – Tim Radnidge Page 1

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 

jQuery – Select element cheat sheet Copyright 2009 – Tim Radnidge Page 2 

}) 

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 

Set an attribute for matched select element e.g. set title 

Remove an attribute from matched select 

element 

Class: 

$(“#elementid”).attr(“name”) 

$(“#elementid”).attr(“title”, “myselect”) 

e.g. remove title 

$(“#elementid”).removeAttr(“title”) 

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("Some orangesMore OrangesEven more oranges") 

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 

Set the selected element based upon text e.g. 

e.g. $(“#elementid”).val(“7”) 

$("#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("Apples") 

Add options to the start of select element e.g. $("#elementid").prepend("Before Apples") 

Add options after selected index e.g. $("#elementid option:eq(0)").after("Some pears" 

Add options before selected index e.g. $("#elementid option:eq(3)").before("Some apricots") 

Replace items at a certain index e.g. $("#elementid 

option:eq(1)").replaceWith("Some apples") 


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 

passed in URL 

jQuery – Select element cheat sheet Copyright 2009 – Tim Radnidge Page 5 

}) 

$("#elementid").serialize() 

Returns something like this: 

"elementname=1"

A final note 

Currently there are several great tutorials that cover many ways that you can access and manipulate 

select elements using jQuery, but there doesn’t seem to be one place that has it all. I wanted to write 

this document to save people like myself who have links to about 10 different tutorials from having to 

go searching each time you want to remember how to do something. This document was produced 

after several hours of research and hard work; I hope it is a benefit to many. 

A big thanks to everyone for your feedback, please let me know either via email or leaving a comment 

on the blog if you have something kind or constructive to say. 

If there is anything incorrect or missing from this document please also let me know so that everyone 

can benefit. 

As you may be interested in cutting and pasting from this document to try out on your own systems 

please not that the content of this document and the code contained within is provided as is and is 

without warranty of any kind including merchantability or fitness for any other purpose whatsoever. 

A big thanks also to the jQuery team for making such a great product. Please go to the jQuery site for 

the full documentation and latest plug-ins. 

The myphpetc… blog can be found here http://myphpetc.blogspot.com. I keep this updated regularly 

so come back and visit often. 

- Tim Radnidge.

jQuery – Select Element Cheat Sheet (PDF) - Awardspace

Create successful ePaper yourself

Delete template?

Save as template?