stak answer

by sanat gupta

HTML

<select name="country" id="country"></select> <br>
    <select name="state" id="state"></select> <br>
    <select name="city" id="city"></select>
    <input name="code" id="code" class="md-textarea form-control" rows="1" type="text" maxlength="2" required>
    <label for="code">Airport Code</label>

JavaScript

$(document).ready(function() {
  // Countries
  var country_arr = new Array("Select Country", "AUSTRALIA", "EUROPE", "SINGAPORE", "USA");

  $.each(country_arr, function(i, item) {
    $('#country').append($('<option>', {
      value: i,
      text: item,
    }, '</option>'));
  });

  // States
  var state = new Array();
  state[0] = "Select State";
  state[1] = "Select State|QUEENSLAND|VICTORIA|NEW-SOUTH-WALES";
  state[2] = "Select State|NETHERLANDS";

  // Cities
  var city = new Array();
  city['QUEENSLAND'] = "BRISBANE";
  city['VICTORIA'] = "MELBOURNE";
  city['NEW-SOUTH-WALES'] = "SYDNEY";
  city['NETHERLANDS'] = "Select City|AMSTERDAM|AMSTERDAM2";



  // AIRPORT CODE
  var code = new Array();
  code['BRISBANE'] = "BNE1";
  code['MELBOURNE'] = "MEL1";
  code['SYDNEY'] = "SYD1";
  code['AMSTERDAM'] = "AMS1";
  code['AMSTERDAM2'] = "AMS2";

  $('#country').change(function() {
    var c = $(this).val();
    var state_arr = state[c].split("|");
    $('#state').empty();
    $('#city').empty();
    $('#code').empty();
    if (c == 0) {
      $('#state').append($('<option>', {
        value: '0',
        text: 'Select State',
      }, '</option>'));
    } else {
      $.each(state_arr, function(i, item_state) {
        $('#state').append($('<option>', {
          value: item_state,
          text: item_state,
        }, '</option>'));
      });
    }
    $('#city').append($('<option>', {
      value: '0',
      text: 'Select city',
    }, '</option>'));
  });

  $('#state').change(function() {
    var s = $(this).val();
    if (s == 'Select State') {
      $('#city').empty();
      $('#city').append($('<option>', {
        value: '0',
        text: 'Select city',
      }, '</option>'));
    }
    var city_arr = city[s].split("|");
    $('#city').empty();

    $.each(city_arr, function(j, item_city) {
      $('#city').append($('<option>', {
        value: item_city,
        text: item_city,
      }, '</option>'));
   
    });
  });

 ...