jQuery Select Change Event, Get Selected Option

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

Download script LIVE DEMO & GET WP THEME

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="//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 tagsfunction 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(http://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.

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。