JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="" id="fromCity"></select>
<select name="" id="toCity"></select>

JavaScript

var listCity = {
  "Popular": [
    { "cityname": "London", "code": "LDN" },
    { "cityname": "Rome", "code": "ROM" },
    { "cityname": "Madrid", "code": "MDR" }
  ],
  "Germany": [
    { "cityname": "Hamburg", "code": "HMB" },
    { "cityname": "Frankfurt", "code": "FRN" }
  ]
}

Object.keys(listCity).forEach(function(key) {
  var $group = $('<optgroup label="' + key + '"></optgroup>');

  listCity[key].forEach(function(obj) {
    $group.append('<option value="' + obj.code + '">' + obj.cityname + '</option>')
  });
  $('#fromCity,#toCity').append($group);
  $('#toCity').val('MDR');
  
  $('#fromCity,#toCity').change(function(){
  //here's the problem
  var a = $('#fromCity').val();
  var b = $('#toCity').val();
  if(a == b){
   alert("Please choose another city");
  }
  })
  
})