JQuery with HTML SELECT element
From w3cyberlearnings
HTML Select Element
<form name="frm1">
<select id='ilist' name="nlist">
<option value='1'>Option A</option>
<option value='2'>Option B</option>
<option value='3'>Option C</option>
<option value="4">Option D</option>
<option value="5">Option E</option>
<option value="6">Option F</option>
<option value="7">Option G</option>
</select>
</form>
How to select the option value
Example: Use Name TRY-IT
$(document).ready(function(){
$('select#ilist').change(function(){
var sel_value = $('select[name="nlist"] option:selected').val();
alert(sel_value);
});
});
Example: Use Id TRY-IT
$(document).ready(function(){
$('select#ilist').change(function(){
var sel_value = $('select#ilist option:selected').val();
alert(sel_value);
});
});
Example: Select option value and its text: TRY-IT
- option 1: value:1 text:Option A.
- This will get the option value and its text.
<html>
<head>
<title>Select option</title>
<script
type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('#checkboxcheck').click(function(){
var sel_value = $('select[name="nlist"] option:selected').val();
var sel_tx = $('select[name="nlist"] option:selected').text();
$('#content').html('value:'+sel_value + ' text:'+sel_tx);
});
});
</script>
</head>
<body>
<div id="content"></div>
<select id='ilist' name="nlist">
<option value='1'>Option A</option>
<option value='2'>Option B</option>
<option value='3'>Option C</option>
<option value="4">Option D</option>
<option value="5">Option E</option>
<option value="6">Option F</option>
<option value="7">Option G</option>
</select>
<button id="checkboxcheck">Check It</button>
</body>
</html>
Example: Multiple select option TRY-IT
- Get all multiple select option
- Save the user select option to the selected_op array
- Join the array and display
<html>
<head>
<title>Multiple Select option</title>
<script
type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('#checkboxcheck').click(function(){
var selected_op = [];
$('select[name="nlist"] option:selected').each(function() {
selected_op.push('Text: '+$(this).text() + ' Value: ' + $(this).val());
});
var all_fruits= selected_op.join(',');
$('#content').html(all_fruits);
});
});
</script>
</head>
<body>
<div id="content"></div>
<select id='ilist' name="nlist" multiple="multiple">
<option value='1'>Option A</option>
<option value='2'>Option B</option>
<option value='3'>Option C</option>
<option value="4">Option D</option>
<option value="5">Option E</option>
<option value="6">Option F</option>
<option value="7">Option G</option>
</select>
<button id="checkboxcheck">Check It</button>
</body>
</html>
Getting the text of multiple selected option
var myopt = [];
$('#ilist :selected').each(function(i, selected) {
myopt[i] = $(selected).text();
});
Getting the value of multiple selected option
var myopt = [];
$('#ilist :selected').each(function(i, selected) {
myopt[i] = $(selected).val();
});
Related Links
Jquery and HTML Elements
