jQuery Get Dropdownlist Selected Value Onchange Event

jQuery Get Dropdownlist Selected Value Onchange Event

jQuery Get Dropdownlist Selected Value Onchange Event

jquery change select option value and text Example

Welcome to the In Pakainfo.com website! You will Step By Step learn web programming, easy and very fun. This website allmost provides you with a complete web programming tutorial presented in an easy-to-follow manner. Each web programming tutorial has all the practical examples with web programming script and screenshots available.

Read Also:  How to Create html to pdf using php | Convert HTML to PDF using PHP

Get the selected option value and name with jQuery

<div class="select_box">
	<select id="selectidget">
		<option value="1" name="stat">Today</option>
		<option value="2" name="stat">Yesterday</option>
		<option value="3" name="stat">Last 7 Days</option>
		<option value="4" name="stat">This Month</option>
		<option value="5" name="stat">Last Month</option>
		<option value="6" name="stat">This Year</option>
		<option value="7" name="stat">Last Year</option>
		<option value="9" name="stat">All Time</option>
	</select>
</div>
<script>
$('#selectidget').on('change', function(e) {

var userId = 'action=filter_product&fillproduct='+this.value+'&mid='+ $(this).find('option:selected').attr("name"); 
 console.log(userId);
e.preventDefault();
});
</script>

jQuery get the name of a select option Example

$(this).find('option:selected').attr("name");

Find name of selected option using jQuery

$("#"+$(this).attr("id")+" :selected");
$(this).find(":selected").text();

Jquery: get name of option field

var name = $('#productsid option:selected').text();

Get the selected option id with jQuery Example

<select id="select_box">
   <option value="p1" id="pid1">get id of dropdown jquery</option>
   <option value="p2" id="pid2">how to get dropdown id in javascript</option>
   <option value="p3" id="pid3">get id of select box jquery</option>
   <option value="p4" id="pid4">get id of selected option javascript</option>
   <option value="p5" id="pid5">jquery select dropdown by id</option>
   <option value="p6" id="pid6">jquery get selected option value</option>
</select>

$("#select_box").change(function() {
  var pid = $(this).children(":selected").attr("id");
  console.log(id);
});

Example

Read Also:  How to display image from storage path using route in Laravel?

The selected value in dropdown using jquery Full Example

 <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery Get each Selected value from dropdown opetin change event </title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function() {
$('#select_box').change(function() {
alert($(this).val())
})
})
</script>
</head>
<body>
<form id="form1">
<div>
<h3>Select Name:</h3>
<select id="select_box">
	<option value="p1" id="pid1">get id of dropdown jquery</option>
	<option value="p2" id="pid2">how to get dropdown id in javascript</option>
	<option value="p3" id="pid3">get id of select box jquery</option>
	<option value="p4" id="pid4">get id of selected option javascript</option>
	<option value="p5" id="pid5">jquery select dropdown by id</option>
	<option value="p6" id="pid6">jquery get selected option value</option>
</select>
</div>
</form>
</body>
</html>

About Pakainfo

I am Jaydeep Gondaliya, a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Pakainfo →

Leave a Reply

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