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

Posted 2023-05-07

【中文标题】Select2 更改事件 - 在第一个 select2 框值更改时更改下一个 select2 框的选项

【英文标题】：Select2 Change Event - Change the options for next select2 box on first select2 box value change

【发布时间】：2016-02-03 01:30:41

【问题描述】：

我有 2 个select2 盒子。首先是类别，然后是子类别。

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

请帮帮我。

【问题讨论】：

你可以从这里获得一些想法：***.com/questions/13268083/…

【参考方案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>

【讨论】：

你确定没有什么比这更优雅了吗？