Hit enter after type your search item
Home / jQuery / Six demos of how to get value in jQuery select option

Six demos of how to get value in jQuery select option

The HTML select dropdown and jQuery

In certain scenarios, you need to work with forms in web projects and need to get value selected by the user, particularly in the select dropdown to perform a certain action without refreshing the web page.

In this tutorial, I will show you examples of using HTML select and getting the selected value and performing some action by using jQuery. The examples can be seen online by clicking the image or link with each example.

 

How to get selected value from the dropdown using jQuery code

By using the $.val method of jQuery, you may get the value of any input form controls including HTML select. In the case of a select dropdown, the returned value is the selected option “value”, not its text.

See a demo below, where I created a select dropdown. Choose a color from the dropdown and it will trigger an alert, showing the selected color’s value.

jQuery select option

See online demo and code

As you select a color from the dropdown, the change event occurs in the dropdown. The following code is placed as this event occurs where $.val method is used to get the value of selected option dropdown:


 

The selected option’s value is displayed in a simple alert. You can see, the alert shows the value behind each visible text, not the text itself.

An example to get the text of selected option

If you want to get the text not the value of the selected option in jQuery, you can use the $.text method. However, simply using the $.text will return the whole text of the select dropdown. You have to use the selected attribute to get the text of selected option.

For example, if you use this in the above example:


 

The output will be:

jQuery select option text

See online demo and code

You see, an option is selected and it displayed all color names (select tag text of all options) in the alert.

To get only selected option’s text, you may use this in above example:


 

See the demo and code online:

jQuery selected text

See online demo and code

The alert is showing the text of selected option only. Note that the value for the “Yellow” text is Yel which is set in the <select> tag:


 

Changing the CSS upon selecting a color demo

In this example to explain how you may get the value of select by using jQuery, as you select a color from the dropdown, this will be applied as the background color of the body.

See the demo first which is followed by a little explanation:

jQuery selected option color

See online demo and code

At the select change event of the dropdown, following jQuery code is executed:


 

Where a variable is assigned the selected value from the dropdown and next line uses the $.css method where body selector is used and the background color is changed to the one selected in the dropdown.

Similarly, you can use a div, paragraph, span, lists or other elements in place of body selector to perform a similar or different action.

An example to get selected value and performing action in HTML table

In this example, I have created an HTML table with a CSS class as demo page loads. You can see a dropdown with different options to select a theme for the table.

As you select a theme, it will be applied to that table. Check online first and then I will explain what is done underneath:

jQuery select HTML table

See online demo and code

Again, at the change event of the dropdown, the value of the selected option is assigned to a variable. This variable’s value is used in the $.addClass method of jQuery. Before that, the removeClass method deleted the existing class in HTML table which is followed by executing the addClass method to apply selected class.

This jQuery code is used, which is placed just above the </body> tag:


 

The table “themes” CSS is created and placed inside the <style> tag. You can see the complete code including markup and CSS at the demo page.

An example of getting selected value and using $.get method

Not only you may perform simple CSS changes by using jQuery methods as shown in the above examples, you can also use the selected value to perform some AJAX based operations as well.

In this example, the HTML dropdown is populated with a few products for demo purpose. After selecting a product, as you click the button “Load Product Data”, the selected value is assigned to a variable and used in the jQuery $.get method.

The selected product is searched in the MySQL database’s table by establishing a connection and creating an SQL query and finally, the result is displayed in an HTML table.

See the demo online by clicking the link or image below:

jQuery select ajax get

See online demo and code

See the following code in the <script> section:


 

You see, the selected option is assigned to a variable by using the $.text method. After that, the $.get method is used to call a PHP file along with sending a ProductName parameter.

The PHP file established the connection with a database and created an SQL query on the basis of the selected product and retrieves the product information from MySQL table.

Finally, an HTML table is created inside that PHP file that is returned to $.get’s getresult parameter. The final line in jQuery code is used to display that returned data to the “html” selector.

Similarly, you can use the $.post and $.ajax methods of jQuery to perform these kind of operations without refreshing the webpage.

This div height required for enabling the sticky sidebar