jQuery中的下拉onchange函數

Question

我有2個下拉菜單。

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>

在這里，印度具有“值1”和“值2”。 而“美國”是“價值3”和“價值4”。

我打算將位置值更改為“ INDIA”，如果我將單位類型選擇為“ Value 1”和“ Value 3”，則此處的Value 3不是“ INDIA。所以我想顯示一個警報消息”值有誤”。如何使用JSON格式執行此操作。

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

如何為每個國家/地區創建單獨的選擇。 喜歡：

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();
    }
});

這樣，您就可以完全跳過javascript驗證和警報消息。

Answer 3

試試這個它正在工作：

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);
});
});