[jQuery] Retrieve the Value of Selection Box
Here is a simple jQuery tutorial to retrieve the content of the value of Selection Box.
Screenshot of Selection Box Layout
Here is the code snippet for the above screenshot.
Create this folder structure, these all are placed in a same folder
► CSS [directory]
→ style.css
► JS [directory]
→ jquery.js
→ remote.js
► index.html
Jquery
Download jQuery from the jQuery official site http://code.jquery.com/jquery-1.5.1.min.js
[html]
<!– Filename : index.html –>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/remote.js"></script>
<title>Remote Fetch (Ajax)</title>
</head>
<body>
<div id="wrapper">
<form method=’post’ action=” name=’ajaxForm’>
<fieldset>
<legend> Remote Fetch Request</legend>
<p class=’clearfix’>
<label for =’Fruits’>Your Favourite Fruit :</label>
<select name=’cmbFruits’ id="cmb_fruits">
<option value=’1′>Apple</option>
<option value=’2′>Banana</option>
<option value=’3′>Orange</option>
<option value=’4′>Pineapple</option>
</select>
</p>
<p class=’clearfix’>
<label for =’Colors’>Your Favourite Color:</label>
<select name=’cmbColors’ id="cmb_colors">
<option value=’1′>Blue</option>
<option value=’1′>Green</option>
<option value=’3′>Pink</option>
<option value=’2′>Red</option>
<option value=’4′>Yellow</option>
</select>
</p>
<p><span class=’right’>
<label for="submit"><input type=’submit’ value="Order Items" name=’btnOrder’ id="btn_order"></label>
</span>
</p>
</fieldset>
</form>
</div>
</body>
</html>
[/html]
Here is the stylesheet for the above layout.
Style.css
[css]
/* Filename : style.css */
@CHARSET "ISO-8859-1";
body {
background:#444;
color:#fff;
margin:0 auto;
padding:0;
font-family:verdana,sans-serif;
font-size:14px;
}
fieldset {
margin:0 auto;
padding:10px;
}
legend {
padding:4px;
display:block;
border:1px solid #ccc;
}
input,select {
line-height:2;
width:120px;
border:1px solid #ccc;
}
p {
border:0px solid #000;
}
label {
float:left;
display:block;
}
select {
display:block;
float:right;
}
#wrapper {
position:relative;
margin:0 auto;
padding:0;
padding-top:15%;
width:320px;
}
.right {
float:right;
}
input[type=submit] {
height:30px;
width:90px;
text-align:center;
border:3px solid #fff;
}
/** Clearfix hack */
/* drop the dot, replace with space */
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 0.5%;}
.clearfix {display: block;}
/* End hide from IE-mac */
[/css]
[js]
// Wait until DOM is ready
$(document).ready(function(){
// Wait for change in Fruits
$("#cmb_fruits").change(function(e){
value = $(this).val();
alert(value);
});
});
[/js]