選択タグからデータをリロードする各Ajaxリクエスト

Question

私は2つの選択タグを持つフォームを持っています。 ..私は、次のselectタグに他のデータをロードするためのAJAXリクエストを実行する最初のselectタグからデータを選択した後

$('#carousel_type').on('change', function(){ 
      var selected = $(this).val(); 
      $.ajax({ 
       type:'POST', 
       url:'functions/get_subcase.php', 
       data:{subcase:selected}, 
       dataType:'JSON', 
       success: function(data){ 

        for(i in data) 

        $('#subcarousel_type').append('<option value = '+data[i].id+'>'+data[i].carousel_title+'</option>'); 
       } 
      }); 
     }); 

これは私が私のAJAXからの戻りデータを表示するために使用したコードは...ですが、私が遭遇する問題は、もし私が別のデータを選択すると.. ajaxリクエストは次のリクエストなどをロードするだけです..

私がしたいのは、最初の選択タグからデータを選択するときです次の選択タグと、最初の選択タグから再度選択すると、2番目の選択タグのデータがリロードされます。

私は何も考えていません何が機能していないのですか？

Answer 1

問題を正しく理解していれば、前回の呼び出しで追加されたオプション要素を削除しないため、問題は次回のデータの追加時です。機能の起動時に、このリンクを張って

$('#carousel_type').on('change', function() { 
    var selected = $(this).val(); 

    $.ajax({ 
    type: 'POST', 
    url: 'functions/get_subcase.php', 
    data: { subcase: selected }, 
    dataType: 'JSON', 
    success: function(data) { 
     var $subcarousel = $('#subcarousel_type').empty(); // remove previously loaded options 
     for (i in data) 
     $subcarousel.append('<option value = ' + data[i].id + '>' + data[i].carousel_title + '</option>'); 
    } 
    }); 
}); 

Answer 2

：この問題を解決するには、このような新しいオプションを追加する前にempty()を呼び出すことができます。

$('#subcarousel_type').html(''); 

あなたのコードが正常に動作していますが、オプションを空にして追加する必要があり

$('#carousel_type').on('change', function(){ 
    var selected = $(this).val(); 
    $.ajax({ 
     type:'POST', 
     url:'functions/get_subcase.php', 
     data:{subcase:selected}, 
     dataType:'JSON', 
     success: function(data){ 
      $('#subcarousel_type').html(""); //<-------- add this line 
      for(i in data){ 

       $('#subcarousel_type').append('<option value = '+data[i].id+'>'+data[i].carousel_title+'</option>'); 
      } 
     } 
    }); 
}); 

Answer 3

これを行うください。新しい価値をあなたはそれをajax呼び出しの形にしました。

$('#subcarousel_type').empty(); 

Answer 4

を追加する前に、あなたのドロップダウンを空にする必要があります....

$('#carousel_type').on('change', function(){ 
    $('#subcarousel_type').html(''); 
     var selected = $(this).val(); 
     $.ajax({ 
      type:'POST', 
      url:'functions/get_subcase.php', 
      data:{subcase:selected}, 
      dataType:'JSON', 
      success: function(data){ 

       for(i in data) 

       $('#subcarousel_type').append('<option value = '+data[i].id+'>'+data[i].carousel_title+'</option>'); 
      } 
     }); 
    });