How to get the selected value from drop down (select) box from html using JQuery

<!DOCTYPE html>
<html>
<head>

<script src="scripts/jquery-1.11.1.js"></script>

<script>
$(document).ready(function(){

$('#mydropdown').change( function(){
var selectedValue = $(this).children("option").filter(":selected").val();
if(selectedValue == 'default')
return;
else {
alert(selectedValue);
var data = $(this).children("option").filter(":selected").text();
alert(data);
}
});

$( "#garden" ).change(function() {
var value = $( "#garden option:selected" ).val();
if(value == 'default')
return;
else {
alert(value);
var str = $( "#garden option:selected" ).text();
alert(str);
}
});
});
</script>

</head>

<body>

<form method="post" action="">
<table id="myTable" style="width:100%">
<tr>
<th align="center">
<label>Select LOB</label><span> </span>
<select id="mydropdown" name="mydropdown" style="width:20%">
<option value="default" selected="selected">(Select)</option>
<option value="1">ATHAVAN</option>
<option value="2">SIVAJI</option>
<option value="3">AS</option>
<option value="4">SARAVANAN</option>
</select>
</th>
</tr>
<tr>
<tr align="center">
<label>Select LOB</label><span> </span>
<select id="garden" name="garden" style="width:20%">
<option value="default" selected="selected">(Select)</option>
<option value="1">Flowers</option>
<option value="2">Shrubs </option>
<option value="3">Trees</option>
<option value="4">Bushes</option>
</select>
</tr>
</tr>
</table>
</form>

</body>
</html>

Happy learning and sharing 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: