{"id":11747,"date":"2016-04-04T16:15:11","date_gmt":"2016-04-04T13:15:11","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=11747"},"modified":"2017-12-21T15:26:10","modified_gmt":"2017-12-21T13:26:10","slug":"jquery-select-option-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-select-option-example\/","title":{"rendered":"jQuery Select Option Example"},"content":{"rendered":"

The aim of this example is to explain and use various jQuery selectors and methods related to manipulation the select dropdown element of HTML. The <select><\/code> element is used to create a drop-down list. The <option><\/code> tags inside the element define the available options in the list. These basic HTML elements are the ones we’ll apply special selector and\/or methods to make them fit our every need.<\/p>\n

So, why do we need to manipulate the select dropdown? Well, in many cases, the information stored in this element needs to be dynamic, meaning depended on some other action taken beforehand. Also, in other cases, the user may have interacted with the dropdown and we need to reset it when a new user accesses the page.
\n 
\n[ulp id=’qGGDqWnle19VavkM’]<\/p>\n

1. Document Setup<\/h2>\n

To begin, create a new HTML document and add the basic syntax inside, including the jQuery library link:<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title>jQuery Select Option Example<\/title>\r\n<\/head>\r\n<body>\r\n\r\n<!-- HTML SECTION  -->\r\n\r\n\r\n<!-- JAVASCRIPT SECTION  -->\r\n<script src=\"jquery-1.11.3.min.js\"><\/script>\r\n\r\n<script type=\"text\/javascript\">\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Just to illustrate the idea of having a select dropdown in our page, this is an example:<\/p>\n
<!-- HTML SECTION  -->\r\n<select>\r\n    <option>Option 1<\/option>\r\n    <option>Option 2<\/option>\r\n    <option>Option 3<\/option>\r\n<\/select>\r\n<\/pre>\n
Well, this is the most basic example, because normally the select<\/code> and option<\/code> also have their respective attributes applied to make them more dynamic and accessible. For now, it would have this simple view in the browser:<\/p>\n
\"The<\/a>
The select element of HTML<\/figcaption><\/figure>\n
2. Cases and Examples<\/h2>\n
In the following section, we’re having a look at the various cases we can use jQuery with the select<\/code> element.<\/p>\n
2.1 Get selected text from the select box<\/h3>\n
In this example, we’ll get the text of the selected option:<\/p>\n
<select id=\"box\">\r\n    <option>First Text<\/option>\r\n    <option>Second Text<\/option>\r\n    <option selected=\"selected\">Third Text<\/option>\r\n<\/select>\r\n\r\n<p><\/p>\r\n<\/pre>\n
As you can see, we added a new id<\/code> and a selected<\/code> attribute and also an empty paragraph where we’ll store the text we got from the select box:<\/p>\n
<script type=\"text\/javascript\">\r\n    var boxText = $(\"#box option:selected\").text(); \/\/ get the text\r\n    $('p').text(boxText);   \/\/ place the boxText in a paragraph\r\n<\/script>\r\n<\/pre>\n
In this case the result would be “Third Text” because that is the option currently pre selected:<\/p>\n
\"Getting<\/a>
Getting the text from the select box!<\/figcaption><\/figure>\n
2.2 Select option using the value attribute<\/h3>\n
In this example we’ll get the text of a specific value on an option:<\/p>\n
<select name=\"box\">\r\n    <option value=\"1\">First Text<\/option>\r\n    <option value=\"2\">Second Text<\/option>\r\n    <option value=\"3\">Third Text<\/option>\r\n<\/select>\r\n<\/pre>\n
In this case, we used the name<\/code> attribute inside the select element<\/code>. Additionally, option<\/code>s now have a unique value<\/code> identifier. In jQuery, we’ll be selecting using the name attribute and applying the .val()<\/code> method we’ll choose to display only the option we want as the default selected in the select box:<\/p>\n
<script type=\"text\/javascript\">\r\n    $('[name=box]').val( 2 ); \/\/ this will select the second text\r\n<\/script>\r\n<\/pre>\n
As expected, the view in the browser would be:<\/p>\n
\"Selecting<\/a>
Selecting an option by its value<\/figcaption><\/figure>\n
2.3 Select option using the option text<\/h3>\n
In this third example, we’ll be selecting and displaying an option in a rather professional way.<\/p>\n
<script type=\"text\/javascript\">\r\n    $('[name=box] option').filter(function() {  \/\/ applied the filter method\r\n        return ($(this).text() == 'Third Text');  \/\/ select 'Third Text'\r\n    }).prop('selected', true);  \/\/ change selected property to true\r\n<\/script>\r\n<\/pre>\n
So, after selecting the right select<\/code> element, we apply the filter<\/code> method (seems like we need to filter options) and give it a function as a parameter, which then leads to (returns) this element we’re selecting the text of which is equal to ‘Third Text’. But that just returns it, we don’t see anything. To display what is returned we add the .prop()<\/code> method to all of this and define the selected<\/code> attribute to true<\/code>. In this case, the third option will be selected like so:<\/p>\n
\"Select<\/a>
Select option using the option text<\/figcaption><\/figure>\n
Setting the selected attribute to true<\/code> is the same as setting it to 1<\/code> or selected<\/code>.<\/p>\n
3. Best jQuery Select Plugins<\/h2>\n
There are quite a lot of jQuery plugins out there to help you with a nice a smoothly animated select box\/dropdown that you may want to use. Below, we introduce some of the best plugins that you can use.<\/p>\n
3.1 jQuery Nice Select<\/h3>\n
jQuery Nice Select is a lightweight jQuery plugin that replaces native select elements with customizable dropdowns.<\/p>\n
\"jQuery<\/a>
jQuery Nice Select Plugin<\/figcaption><\/figure>\n