If you have two select fields and want to load options in second one, based on selected option from first one then, below example will help you lot to understand how it can be done.
Here in this example, when a user selects country in first select field, jQuery on change event is called upon to list out it’s relevant cities in second select field simultaneously.
Given below jQuery select change function’s syntax:
$("select").change(function(){
// Do something here.
}we used arrays to store city names for different countries and created a function city(arr) which populates options (city names relevant to selected country) for second select tag as shown below:
//Function To List out Cities in Second Select tags
function city(arr){
$("#city").empty();//To reset cities
$("#city").append("<option>--Select--</option>");
$(arr).each(function(i){//to list cities
$("#city").append("<option value=""+arr[i].value+"">"+arr[i].display+"</option>")
});
}Watch our live demo or download code to use it.
To learn more, our Complete HTML and jQuery Code is given below:
HTML File: select_jquery.html
Given below our complete HTML code , copy to use it.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Select Change Event For Dependent Select Option Field - Demo Preview</title>
<meta name="robots" content="noindex, nofollow">
<!-- Include CSS File Here -->
<link rel="stylesheet" href="select_jquery.css"/>
<!-- Include JS File Here -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="select_jquery.js"></script>
</head>
<body>
<div class="container">
<div class="main">
<h2>Dependent Select Option Field Example</h2>
<label>Select Country:</label>
<div id="prm">
<select id="country">
<option>--Select--</option>
<option>USA</option>
<option>AUSTRALIA</option>
<option>FRANCE</option>
</select>
<label>Select City:</label>
<select id="city">
<!-- Dependent Select option field -->
</select>
</div>
</div>
</div>
</body>
</html>jQuery File: select_jquery.js
Given below our complete jQuery code for initializing second select tag options.
$(document).ready(function() {
// Initializing arrays with city names.
var USA = [{
display: "Washington, D.C.",value: "WashingtonDC"},
{display: "Alaska", value: "Alaska"},
{display: "New York",value: "New-York"},
{display: "Florida",value: "Florida"},
{display: "Hawaii",value: "Hawaii"},
{display: "California",value: "California"}];
var AUSTRALIA = [{
display: "Canberra",value: "Canberra"},
{display: "Sydney",value: "Sydney"},
{display: "Melbourne",value: "Melbourne"},
{display: "Perth",value: "Perth"},
{display: "Gold Coast ",value: "Gold-Coast"}];
var FRANCE = [{
display: "Paris",value: "Paris"},
{display: "Avignon",value: "Avignon"},
{ display: "Strasbourg",value: "Strasbourg"},
{display: "Nice", value: "Nice"}];
// Function executes on change of first select option field.
$("#country").change(function() {
var select = $("#country option:selected").val();
switch (select) {
case "USA":
city(USA);
break;
case "AUSTRALIA":
city(AUSTRALIA);
break;
case "FRANCE":
city(FRANCE);
break;
default:
$("#city").empty();
$("#city").append("<option>--Select--</option>");
break;
}
});
// Function To List out Cities in Second Select tags
function city(arr) {
$("#city").empty(); //To reset cities
$("#city").append("<option>--Select--</option>");
$(arr).each(function(i) { //to list cities
$("#city").append("<option value=\"" + arr[i].value + "\">" + arr[i].display + "</option>")
});
}
});CSS File: select_jquery.css
Styling HTML Elements.
/* Below line is used for online Google font */
@import url(https://fonts.googleapis.com/css?family=Droid+Serif);
h2{
text-align: center;
}
div.container{
width: 960px;
height: 610px;
margin:50px auto;
font-family: 'Droid Serif', serif;
position:relative;
}
div.main{
width: 320px;
float:left;
padding: 10px 60px 40px;
box-shadow: 0 0 10px;
border-radius: 2px;
font-size: 13px;
margin-top: 70px;
}
label{
color: #464646;
text-shadow: 0 1px 0 #fff;
font-size: 14px;
font-weight: bold;
}
select#country,#city{
width:100%;
height:30px;
font-size:16px;
font-family:cursive;
}
select#USA,
select#AUSTRALIA,
select#FRANCE{
display:none;
width:100%;
height:30px;
font-size:16px;
font-family:cursive;
}Conclusion:
This was all about to use select change event for populating list in second select tag. Hope you like it, Keep reading our other blogs
