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>