Select2更改事件 - 更改第一个select2框值更改的下一个select2框的选项

Question

我有2个select2框。首先是类别，其次是子类别。

现在，我想根据类别框选择的值更改子类别框的选项。并且子类别框的数据应该使用AJAX加载。

请帮帮我。

Answer 1

只是解决了它自己

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" /> 
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script> 

<select class="js-data-example-ajax" id="category" > 
<option value="">Select a category</option> 
<option>cat1</option> 
<option>cat2</option> 
<option>cat3</option> 
</select> 
<select class="js-data-example-ajax" id="sub-category" > 
</select> 
<script> 
    $("#category").select2({ 
    placeholder: "Select a category",allowClear: true 
    }); 

    $("#sub-category").select2({ 
    placeholder: "Select sub-category",allowClear: true 
    }); 


    $('#category').on("change", function (e) { 
    var result = ''; 
    var catval = $(this).val(); 
    if(catval != '') { 
    url = "subcats_top/"+ catval; 
     $.ajax({ 
     type: "GET", 
     url: url, 
     dataType: 'json', 
     success: function(data){ 
     var length = data.length; 

     if(length > 0) { 
      for(key in data) { 
       result += '<option value="' + data[key].id + '">' + data[key].name + '</option>'; 
      } 


     } else { 

     } 
     $("#sub-category").html(result); 
    } 
    }); 
    } 
    }); 
    </script>