[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

Screenshot of the Selection Box Layout

Screenshot of the 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

Index.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>

Here is the stylesheet for the above layout.
Style.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 */

jQuery Remote Selection Code

// Wait until DOM is ready
$(document).ready(function(){

	// Wait for change in Fruits
	$("#cmb_fruits").change(function(e){
		value = $(this).val();
		alert(value);
	});
});

Leave a Reply

Your email address will not be published. Required fields are marked *