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](wp-content/uploads/2017/11/cascade.png "Screenshot of the Selection Box Layout")](wp-content/uploads/2017/11/cascade.png)
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

[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]

jQuery Remote Selection Code

[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]