I bound an event on the change event of my select elements with this:
$('select').on('change', '', function (e) {
});
How can I access the element which got selected when the change event occurs?
Join Stack Overflow to learn, share knowledge, and build your career.
I bound an event on the change event of my select elements with this:
$('select').on('change', '', function (e) {
});
How can I access the element which got selected when the change event occurs?
$('select').on('change', function (e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
....
});
$("selector", this)
you are finding all selector
elements inside this
's context. Writing $("selector", this)
is almost the same than $(this).find('selector')
– Bellash
Jan 24 '14 at 15:07
$()
is an alias of jQuery()
, you can find the documentation here: api.jquery.com/jQuery The signature stated there is obviously jQuery( selector [, context ] )
. @Bellash: if it's "almost the same", what is the difference? Or what is faster? I prefer .find()
since this is more OO IMO...
– Adrian Föder
May 7 '14 at 6:54
.find()
is around 10% faster according to this answer: stackoverflow.com/a/9046288/2767703
– Kevin van Mierlo
Jun 8 '16 at 12:39
You can use the jQuery find method
$('select').change(function () {
var optionSelected = $(this).find("option:selected");
var valueSelected = optionSelected.val();
var textSelected = optionSelected.text();
});
The above solution works perfectly but I choose to add the following code for them willing to get the clicked option. It allows you get the selected option even when this select value has not changed. (Tested with Mozilla only)
$('select').find('option').click(function () {
var optionSelected = $(this);
var valueSelected = optionSelected.val();
var textSelected = optionSelected.text();
});
option
events is a risky proposition, particularly on mobile devices. For example, Webkit doesn't support this event correctly: bugs.chromium.org/p/chromium/issues/detail?id=5284
– Ian Kemp
Feb 24 '16 at 12:23
In case anyone is using the delegated approach for their listener, use e.target
(it will refer to the select element).
$('#myform').on('change', 'select', function (e) {
var val = $(e.target).val();
var text = $(e.target).find("option:selected").text(); //only time the find is required
var name = $(e.target).attr('name');
}
I find this shorter and cleaner. Besides, you can iterate through selected items if there are more than one;
$('select').on('change', function () {
var selectedValue = this.selectedOptions[0].value;
var selectedText = this.selectedOptions[0].text;
});
this.options[ this.options.selectedIndex ]
. Mozilla says is supported by Firefox from 26, IE No support.
– Bernhard Döbler
Dec 14 '16 at 8:36
<select id="selectId">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
$('#selectId').on('change', function () {
var selectVal = $("#selectId option:selected").val();
});
First create a select option
. After that using jquery
you can get current selected value when user change select option
value.
$('#_SelectID').change(function () {
var SelectedText = $('option:selected',this).text();
var SelectedValue = $('option:selected',this).val();
});
Another and short way to get value of selected value,
$('#selectElement').on('change',function(){
var selectedVal = $(this).val();
^^^^ ^^^^ -> presents #selectElement selected value
|
v
presents #selectElement,
});
See official API documentation https://api.jquery.com/selected-selector/
This good works:
$( "select" ).on('change',function() {
var str = "";
// For multiple choice
$( "select option:selected" ).each(function() {
str += $( this ).val() + " ";
});
});
and
$( "select" ).on('change',function() {
// For unique choice
var selVal = $( "select option:selected" ).val();
});
and be easy for unique choice
var SelVal = $( "#idSelect option:selected" ).val();
You can use this jquery select change event for get selected option value
$(document).ready(function () {
$('body').on('change','#select', function() {
$('#show_selected').val(this.value);
});
});
<!DOCTYPE html>
<html>
<title>Learn Jquery value Method</title>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<select id="select">
<option value="">Select One</option>
<option value="PHP">PHP</option>
<option value="jAVA">JAVA</option>
<option value="Jquery">jQuery</option>
<option value="Python">Python</option>
<option value="Mysql">Mysql</option>
</select>
<br><br>
<input type="text" id="show_selected">
</body>
</html>