Por qué la tercera opción de selección está cambiando en función de la segunda. Pero cuando se selecciona la primera selección, la segunda está cambiando. mientras que ir al segundo tercio no está cambiando Esta es mi opinión.

<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>