Click here to Skip to main content
15,867,686 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
Updated 18-Jul-21 21:35pm
Comments
shreya Pandey 2021 22-Apr-22 7:41am    
hii did you get the solution

1 solution

hi,

Just add key.id in place of "+ key +" in the below line of your code.

$('select[name="industri_data[]"]').append('<option value="'+ key +'">'+ value +'</option>');"
 
Share this answer
 
Comments
shreya Pandey 2021 22-Apr-22 7:40am    
hiii did you get solution kindly help me out

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