jQuery Get Selected Option From Dropdown Example

jQuery Get Selected Option From Dropdown Example

Today, We want to share with you jQuery Get Selected Option From Dropdown Example.
In this post we will show you jQuery Get Selected Option From Dropdown Example, hear for jQuery Get Selected Option From Dropdown Example we will give you demo and example for implement.
In this post, we will learn about jQuery Get Selected Option From Dropdown Example with an example.

Using jQuery function, just simple add a change event and get selected option value or text name within events that handler.

Use the jQuery.val() function used for select each elements.

Also Read :  Vuejs set focus Textbox Components

The .val() function or method is simple used to get each data the values of form elements(HTML select option) such as input type, select elements and textarea.

Syntax of jQuery :selected Selector

Select option the pre-selected itemlists in a drop-down list

 $(":selected")

The jQuery :selected selector select element can be used in conjugation data with the val() function or method to find the selected HTML element option value in a select box get value or dropdown list.

HTML Code For : jquery get selected option text Dropdown

<label>Page Name</label>
<input type="text" name="pname" />
<select id="productptask" name="psname">
    <option value="selected">please choose product</option>
    <option value="one">HOME</option>
    <option value="two">About us</option>
	<option value="three">Contact us</option>
	<option value="four">Gallery</option>
	<option value="five">Services</option>
	<option value="six">Project</option>
	<option value="seven">Login</option>
</select>

jquery Code

var PageName = $('#productptask').find(":selected").text();
console.log("pname="+PageName);

Using Javascript :

var PageName = document.getElementById('productptask').value = 'seven';
console.log("pname="+PageName);

or
// Use first select HTML element
var el = document.getElementsByTagName('select')[0]; 
el.selectedIndex = 3;

Example 2 : – Get Selected value of dropdown in jquery on change

HTML part for – jquery get selected option value onchange

<select id="productptask" name="psname">
    <option>please choose product</option>
    <option>HOME</option>
    <option>About us</option>
	<option>Contact us</option>
	<option>Gallery</option>
	<option>Services</option>
	<option>Project</option>
	<option>Login</option>
</select>
<div id="responsedata"></div>

Script : jQuery

$(function() {
  $("#productptask").on("change", function() {
    $("#responsedata").text($("#productptask").val());
  }).trigger("change");
});

View Demo

Also Read :  How to Open URL in New Tab using ReactJS

We hope you get an idea about jQuery Get Selected Option From Dropdown Example
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.

We hope This Post can help you…….Good Luck!.

Recommended For You.

Laravel Send Email Attachment Tutorial With Example
Today, We want to share with you Laravel Send Email Attachment Tutorial With Example.In this post we will show you

Add a Comment

Your email address will not be published. Required fields are marked *