Suggested Videos
Part 11 - jQuery checked selector
Part 12 - Select values of checkbox group with jquery
Part 13 - jQuery get selected checkbox text
In this video we will discuss jQuery :selected selector.
To select all checked checkboxes or radio buttons, we use :checked selector. To select all selected options of a select element use :selected selector.
How to get selected option from single select dropdown in jquery : We want to get the selected option text and value
How to get all selected options from multi-select dropdown in jquery : We want to get all the selected options text and value.
Please note : Hold down the CTRL key, to select more than one item.
Part 11 - jQuery checked selector
Part 12 - Select values of checkbox group with jquery
Part 13 - jQuery get selected checkbox text
In this video we will discuss jQuery :selected selector.
To select all checked checkboxes or radio buttons, we use :checked selector. To select all selected options of a select element use :selected selector.
How to get selected option from single select dropdown in jquery : We want to get the selected option text and value
<html>
<head>
<title></title>
<script src="jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#selectCountries').change(function () {
var selectedOption = $('#selectCountries
option:selected');
$('#divResult').html('Value = ' +
selectedOption.val()
+ ', Text = ' +
selectedOption.text());
});
});
</script>
</head>
<body style="font-family:Arial">
Country:
<select id="selectCountries">
<option selected="selected" value="USA">United
States</option>
<option value="IND">India</option>
<option value="UK">United Kingdom</option>
<option value="CA">Canada</option>
<option value="AU">Australia</option>
</select>
<br /><br />
<div id="divResult"></div>
</body>
</html>
How to get all selected options from multi-select dropdown in jquery : We want to get all the selected options text and value.
<html>
<head>
<title></title>
<script src="jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#selectCountries').change(function () {
var selectedOptions = $('#selectCountries
option:selected');
if (selectedOptions.length > 0) {
var resultString = '';
selectedOptions.each(function () {
resultString += 'Value = ' + $(this).val() +
', Text = ' + $(this).text() + '<br/>';
});
$('#divResult').html(resultString);
}
});
});
</script>
</head>
<body style="font-family:Arial">
<select id="selectCountries" multiple="multiple">
<option selected="selected" value="USA">United
States</option>
<option value="IND">India</option>
<option value="UK">United Kingdom</option>
<option value="CA">Canada</option>
<option value="AU">Australia</option>
</select>
<br /><br />
<div id="divResult"></div>
</body>
</html>
Please note : Hold down the CTRL key, to select more than one item.
Many many thanks, for your helpful all tutorial . how are you, sir ? Sir multiple selectors do not work.When I clicked any option then change and Replaced text.
ReplyDelete