I successfully get to display the data based on the selected dropdown but if I click to ``add more`` there is a problem. The dependent dropdown at the second dropdown(add more) is taking value from the first dropdown. For example, there is ``category`` and ``subcategory``. When I click ``add more``, the ``subcategory2`` is display data based on the ``category1`` that I choose. It should be display data based on the ``category2`` that I choose. It repeats on other ``add more`` which is ``subcategory3`` and ``subcategory4`` will display data based on the category1 that I choose. How can I make it display data based on the category I choose? JS: ``` $('select[name="sektor[]"]').on('change',function(){ var sektorID = $(this).val(); if(sektorID) { $.ajax({ url : 'formkelab/getindustries/' + sektorID, type : "GET", dataType : "json", success:function(data) { console.log(data); $('select[name="industri_data[]"]').empty(); $('select[name="industri_data[]"]').append('<option value="" selected disabled>-- Pilih Industri --</option>'); $.each(data, function(key,value){ $('select[name="industri_data[]"]').append('<option value="'+ key +'">'+ value +'</option>'); }); } }); } else { $('select[name="industri_data[]"]').empty(); } }); ```
JS: ``` $('select[name="sektor[]"]').on('change',function(){ var sektorID = $(this).val(); if(sektorID) { $.ajax({ url : 'formkelab/getindustries/' + sektorID, type : "GET", dataType : "json", success:function(data) { console.log(data); $('select[name="industri_data[]"]').empty(); $('select[name="industri_data[]"]').append('<option value="" selected disabled>-- Pilih Industri --</option>'); $.each(data, function(key,value){ $('select[name="industri_data[]"]').append('<option value="'+ key +'">'+ value +'</option>'); }); } }); } else { $('select[name="industri_data[]"]').empty(); } }); ```
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)