How to select first option using jquery
Tutorial by Matt Doyle Level: Beginner Published on 8 March Learn how to use jQuery selectors in this tutorial.
Includes a description of all selectors supported by jQuery, with example code for each selector. As explained in Getting Started with jQuerytypically you use jQuery selectors to locate elements within the page to work on, then call jQuery methods to manipulate those elements.
In this tutorial you'll look at pretty much all of the selectors supported by jQuery.
Ajax Tutorial: Dynamic Loading of ComboBox using jQuery and Ajax in PHP | 99Points
Many of these are the same as CSS selectors, while some are specific to jQuery. For each selector you'll see an example showing how to use the selector to find page elements. Here's a list of all selectors supported by jQuery.
The basic selectors will be familiar to you if you've ever built a CSS layout or two. You can also combine multiple selectors into a single selector using commas. The basic selectors are great if, for example, you want to select all paragraphs in the page, or the element you want to select has a CSS class or ID.
However, sometimes you need to select a specific element that doesn't have a class or ID, and there's no easy way to add a class or ID to the element in the markup. This can happen when using a CMS with a fixed HTML template, or when working with user-created content. In this situation, you may be able to narrow down the selection by looking at the HTML attributes of the element that you want to select.
For example, you could select:. If you can't narrow down your selection with the basic or attribute selectors, you can delve into an element's content to determine if it should be selected or not. The following examples show how to use: Another way to select elements in jQuery is to look at how elements relate to each other in the page.
You're probably familiar with many of these selectors from working with CSS:. As well as specifying numbers with: Find out more about: The following example selects the first cell of all the odd rows in a table that has an id of "myTable":. Form elements have some specific properties that can make them slightly trickier to select. Similarly, identifying the selected items in a select list, or the checked checkboxes in a form, can be tedious. This is true for jQuery in general — to keep your code fast, always restrict the scope of your selectors where possible.
The following example looks for the form that has an action attribute of "mailform.
jquery - Setting first
Occasionally you want to select an element that is in a known position within a set of previously-selected elements. For example, you may want to select the first paragraph that has a class of "myClass". To give a more complex example, you might want to find all list items within a list that have a class of "myClass"then select the 5th list item from that set. Note that these selectors do not work in the same way as: The following example selects all table cells in the first 2 rows of the table that has an ID of "myTable":.
If none of the above selectors helps you find the elements you need, try one of these handy selectors:. The following example selects all heading proprietary trading system japan in the page, except h1 level 1 headings:.
In this article you've looked at how how to select first option using jquery select elements using jQuery selectors. You've explored the following types of selectors:. Now that you know how to select elements with jQuery, you can start manipulating those elements. I'll show how to do just that in the next few tutorials.
Get tax implications of cashing in stock options, tricks and site updates once a month! Want to add a comment, or ask a question about this article? To post responses you need to be a member. Not a member yet? Signing up is free, easy and only takes a minute. Got a question about making a website?
Ask it in the forums — we'd love to help you. Never made a website before? Read How to Make a Website. Unauthorised copying or redistribution prohibited. By using this Website, you are indicating your acceptance of our Terms of Use. Please read our Privacy Policy. Helping People Make Websites Since Using jQuery Selectors to Locate Page Elements. Beginner Published on 8 March Categories:. Share This Page Tweet. Follow Elated Subscribe to our RSS feed Follow us on Twitter Follow us on Facebook.
Good and Easy to start.
Thanks for your kind words biraj. Glad you liked the tutorial Matt. I know this is a year old, but I just wanted to say thanks for a really helpful post. This is a great reference tool for me as I learn jQuery! Thanks for your feedback - I'm glad you found the article helpful. Good luck with jQuery. Current forum topics arrays Extra Spaces on Page directories how to select first option using jquery paths Contact Form not working Checkboxes and 'submit' button issues Got a question about making a website?
Selects element s that either don't contain the specified attribute, or do contain the specified attribute but the attribute's value doesn't match the specified value. Selects element top shares to buy jse that contain the specified attribute, where the attribute's value starts with the specified string.
Form elements - jQuery Mobile Demos
Selects element s that contain the specified attribute, where the attribute's value ends with the specified string. Selects element s that contain the specified attribute, where the attribute's value contains the specified string anywhere in the value.
Selects element s that contain the specified attribute, where the attribute's value contains the specified word.
A "word" in an attribute value is a sequence of non-space characters. Selects element s that contain the specified attribute, where the attribute's value either equals the specified string, or starts with the specified string followed by a hyphen. Selects element s that contain the specified text. The text can be in the element itself, or in any element inside the element. Selects element s that contain 1 or more elements that match the specified selector string.
The selector looks for matching elements anywhere inside an element — children, grandchildren, and so on. Selects element s that are descendants children, grandchildren, and so on of the specified ancestor s.
This is a more general form of the Child selector. Selects the element that immediately follows another element, where both elements are children of the same parent. Selects the element s that follow another element, where both elements are children of the same parent. This is a more general form of the Next Adjacent selector.
Selects all form fields, including inputtextareaand select elements. Selects a single element within the set of currently-selected elements. Selects elements within the set of currently-selected elements that occur before the specified index.
For example, if you specify an index of 2 i. Selects elements within the set of currently-selected elements that occur after the specified index. Selects all elements with even indices within the set of currently-selected elements. Note that, since the indices start from zero, this is actually the 1st element, 3rd element, and so on. Selects all elements with odd indices within the set of currently-selected elements.
Note that, since the indices start from zero, this is actually the 2nd element, 4th element, and so on. Selects all elements that are currently being animated by jQuery for example, being faded in or out.
Selects all elements that are hidden. An element is considered "hidden" if its display property is set to "none"if it's a form field of type "hidden"if its width and height have been set to zero, or if one of the elements that contain the element is hidden. However, an element is not considered "hidden" just because its visibility property is set to "hidden".