Click here to Skip to main content
14,929,864 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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();
       }
});
```


What I have tried:

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

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900