dropdown onchange function in jquery

Question

I have 2 dropdowns.

JS

$("#location").on("change", function() {

});

$("#unitTypes").on("change", function() {

});

HTML

Location:
<select id="location">
    <option>USA</option>
    <option>INDIA</option>
</select>

Unit Types:
<select id="unitTypes">
    <option>Value 1</option>
    <option>Value 2</option>
    <option>Value 3</option>
    <option>Value 4</option>
</select>

Here INDIA has having " Value 1" and "Value 2". And "USA" is "Value 3" and "Value 4".

I am going to on change the value in location as "INDIA" and if I select the unit type as "Value 1" and "Value 3", here Value 3 is not for "INDIA. So I want to show one alert message "Value is wrong". How can I do this using JSON format.

Answer 1

Try this code - 
<script>
$(document).ready(function(){

  $('#location').on("change",function()
  {
 abc ();
  })
   $('#unitTypes').on("change",function()
  {
 abc ();
  })
  });

  function abc ()
  {
   var loc = $('#location').val();  var uT = $('#unitTypes').val();
    if((loc == "USA" & (uT == "Value 3" | uT == "Value 4")) | (loc =="INDIA" & (uT == "Value 2" | uT == "Value 1")))
    {
    alert ("Wrong selection");
    }
    else
    {
    alert ("Right selection");
    }
  }
</script>

Answer 2

What about creating separate selects for each country. Like:

HTML :

Unit Types:
<select id="unitTypesForUSA">
    <option>Value 1</option>
    <option>Value 2</option>

</select>
<select id="unitTypesForIndia">
<option>Value 3</option>
    <option>Value 4</option>
</select>

JS :

$("#location").on("change", function() {
    if($(this).text()==='USA'){
      $('#unitTypesForUSA').show();
      $('#unitTypesForIndia').hide();
    }else{
      $('#unitTypesForUSA').hide();
      $('#unitTypesForIndia').show();
    }
});

This way you could skip javascript validation and alert message alltoegether.

Answer 3

Try this it is working :

HTML :

<label>Location:</label>
<select id="location">
    <option>--Select--</option>
    <option value="USA">USA</option>
    <option value="INDIA">INDIA</option>
</select>

<label>Unit Types:</label>
<select id="unitTypes">
</select>

JS :

jQuery(function($) {
var locations = ['value1','value2','value3','value4'];
     var unitTypes = $('#unitTypes');
$("#location").on("change", function() {
 var location = $(this).val();
  if (location == 'USA') {
     var html = '<option value="' + locations[2] + '">' + locations[2] + '</option>' +
            '<option value="' + locations[3] + '">' + locations[3] + '</option>';
        } else {
        var html = '<option value="' + locations[0] + '">' + locations[0] + '</option>' +
            '<option value="' + locations[1] + '">' + locations[1] + '</option>';
        }
        unitTypes.html(html);
});
});