Warum ändert sich die dritte Auswahloption basierend auf der zweiten. Wenn jedoch die erste Auswahl ausgewählt wird, ändert sich die zweite. während zum zweiten Drittel gehen ändert sich nichts Dies ist meine Ansicht.

<select name="select1" select="select1">
  <option value="">Select Country</option>
  <option value="india">India</option>
  <option value="america">America</option>
</select>
<select name="select2" id="select2">
  <option value="">Select State</option>
  <option data-value="orissa" value="india">Orissa</option>
  <option data-value="telangan" value="india">Telangan</option>
  <option data-value="america" value="america">USA</option>
  <option data-value="america" value="america">California</option>
</select>
<select name="select3" id="select3">
  <option value="">Select city</option>
  <option value="orissa">Nal</option>
  <option value="orissa">Mir</option>
  <option value="Telangan">Hyd</option>
  <option value="Telangan">Vija</option>
  <option value="america">KRK</option>
  <option value="america">MRK</option>
</select>
This is my script
<script>
  $("#select1").change(function() {
    if ($(this).data('options') == undefined) {
      $(this).data('options', $('#select2 option').clone());
    }
    var id = $(this).val();
    var options = $(this).data('options').filter('[value=' + id + ']');
    $('#select2').html(options);
    });
  $("#select2").change(function() {
  if ($(this).data('options') == undefined) {
    $(this).data('options', $('#select3 option').clone());
  }
  var id = $(this).val();
  var options = $(this).data('options').filter('[data-value=' + id + ']');
  $('#select3').html(options);
});
</script>