当 Ajax 响应来自使用 select2 的 laravel 控制器时，如何检查 JQuery 附加选项中的条件？

Posted 2023-03-14

技术标签:

【中文标题】当 Ajax 响应来自使用 select2 的 laravel 控制器时，如何检查 JQuery 附加选项中的条件？【英文标题】：How to check condition in JQuery append option when Ajax response come from laravel controller using select2? 【发布时间】：2021-05-04 15:22:53 【问题描述】：

当我在表中附加一个带有 jquery 的选择选项时，我想比较两个值，我想比较 if(response.score_range[j].score_range_id =+ item.score_range_id+) ，默认情况下该选项应该是 selected ，但我不能这样做。如果有人知道，请帮忙。

jquery 代码：-

success: function (response) 
    var trhtml = '';
    if (response.student.length > 0) 
         $.each(response.student, function (i, item) 
               trHTML += '<tr><td>' + item.st_id + '</td><td>' + item.full_name + '</td><td>' + item.father_name + '</td>' +
                      '<td>' +
                      '<input type="number"  name="score[]" id="score" step="any" class="form-control" value="'+item.score+'">' +
                      '<input type="hidden"  name="student_id[]" id="student_id" step="any" class="form-control" value="'+item.st_id+'">' +

                      '</td>' +
                      '<td>' + '<select class="form-control select2_1" name="score_range" id="score_range">';
                        for (var j = 0; j < response.score_range.length; j++) 
                            trHTML += '<option  "'+if(response.score_range[j].score_range_id +'='+ item.score_range_id+'") selected value="' + response.score_range[j].score_range_id +'">' + response.score_range[j].type + ' ( ' + response.score_range[j].low_range + '-' + response.score_range[j].up_range + ' )' + '</option>';
                        
                        trHTML += +'</select>' +
                            '</td></tr>';
           );
           $('#tbl_report').html(trHTML);

      
      else 
          trHTML = '<tr style="text-align: center"><td colspan="8">' + 'هیچ اطلاعاتی یافت نشد' + '</td></td>';
          $('#tbl_report').html(trHTML);

这是dd(response(['student'=>$student,'score_range'=>$range])) 结果：

 +original: array:2 [
"student" => Collection #760
  #items: array:6 [
    0 => #759
      +"st_id": 557
      +"full_name": "احمد نوید"
      +"father_name": "محمد"
      +"score": 95.0
      +"score_range_id": 1
    
    1 => #753
      +"st_id": 563
      +"full_name": "الیاس"
      +"father_name": "محمد ضیا"
      +"score": 100.0
      +"score_range_id": 1
    
    2 => #755
      +"st_id": 580
      +"full_name": "سارا"
      +"father_name": "نادر علی"
      +"score": 92.0
      +"score_range_id": 1
    
    3 => #754
      +"st_id": 582
      +"full_name": "آرزو عادلی"
      +"father_name": "عبدالحکیم"
      +"score": 96.0
      +"score_range_id": 1
    
    4 => #756
      +"st_id": 584
      +"full_name": "نرگس شریفی"
      +"father_name": "محمد حسین"
      +"score": 93.0
      +"score_range_id": 1
    
    5 => #757
      +"st_id": 590
      +"full_name": "احمد نوید"
      +"father_name": "نادر علی"
      +"score": 91.0
      +"score_range_id": 1
    
  ]

"score_range" => Collection #797
  #items: array:2 [
    0 => #799
      +"score_range_id": 1
      +"low_range": "90"
      +"up_range": "100"
      +"type": "A"
    
    1 => #800
      +"score_range_id": 2
      +"low_range": "80"
      +"up_range": "90"
      +"type": "B"
    
  ]

]

【问题讨论】：

嗨，你能显示 json 响应吗？所以这里st_id 应该等于score_range_id ? 我更新了代码，score_range_id 在第一个 array 应该等于 score_range_id 和第二个 【参考方案1】：

您可以保留一些变量并将其设为""，因此如果条件匹配，则将值selected 分配给它，否则"" 然后将此变量传递到您的选项标签中。

演示代码：

var response = 
  "student": [
    "st_id": 557,
    "full_name": "احمد نوید",
    "father_name": "محمد",
    "score": 95.0,
    "score_range_id": 1
  , 
    "st_id": 55,
    "full_name": "احمد نوید",
    "father_name": "محمد",
    "score": 9.0,
    "score_range_id": 2
  , 
    "st_id": 55,
    "full_name": "احمد نوید",
    "father_name": "محمد",
    "score": 87,
    "score_range_id": 3
  ],
  "score_range": [
    "score_range_id": 1,
    "low_range": "90",
    "up_range": "100",
    "type": "A"
  , 
    "score_range_id": 2,
    "low_range": "190",
    "up_range": "10",
    "type": "B"
  , 
    "score_range_id": 3,
    "low_range": "190",
    "up_range": "10",
    "type": "C"
  ]

var trHTML = '';
$.each(response.student, function(i, item) 
  trHTML += '<tr><td>' + item.st_id + '</td><td>' + item.full_name + '</td><td>' + item.father_name + '</td>' +
    '<td>' +
    '<input type="number"  name="score[]" id="score" step="any" class="form-control" value="' + item.score + '">' +
    '<input type="hidden"  name="student_id[]" id="student_id" step="any" class="form-control" value="' + item.st_id + '">' +

    '</td>' +
    '<td>' + '<select class="form-control select2_1" name="score_range">';
  var selecteds = item.score_range_id;
  for (var j = 0; j < response.score_range.length; j++) 
    var option_selected = "";
    //check if equals
    if (response.score_range[j].score_range_id == selecteds) 
      option_selected = "selected" //selected
    
    //append it as well..
    trHTML += '<option ' + option_selected + ' value="' + response.score_range[j].score_range_id + '" >' + response.score_range[j].type + ' ( ' + response.score_range[j].low_range + '-' + response.score_range[j].up_range + ' )' + '</option>';
  
  trHTML += '</select></td></tr>';
);

$('#tbl_report').html(trHTML);
//intialize select2 ...
$("select[name=score_range]").select2(
  "width": '200px'
)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>

<table id="tbl_report">
</table>

【讨论】：

【参考方案2】：

在 if 条件中附加 select 选项，它一直在为我工作尝试。

success: function (response) 
    var trHTML = '';
    if (response.student.length > 0) 
        $.each(response.student, function (i, item) 
            trHTML += '<tr><td>' + item.st_id + '</td><td>' + item.full_name + '</td><td>' + item.father_name + '</td>' +
                '<td>' +
                '<input type="number"  name="score[]" id="score" step="any" class="form-control" value="'+item.score+'">' +
                '<input type="hidden"  name="student_id[]" id="student_id" step="any" class="form-control" value="'+item.st_id+'">' +

                '</td>' +
                '<td>' + '<select class="form-control select2_1" name="score_range" id="score_range">';
            for (var j = 0; j < response.score_range.length; j++) 
                trHTML += '<option  "'+if(response.score_range[j].score_range_id +'='+ item.score_range_id+'") selected value="' + response.score_range[j].score_range_id +'">' + response.score_range[j].type + ' ( ' + response.score_range[j].low_range + '-' + response.score_range[j].up_range + ' )' + '</option>';

                trHTML += '<option';
                if(response.score_range[j].score_range_id =item.score_range_id) 
                    trHTML += 'selected value="'+ response.score_range[j].score_range_id+'">' ;

                      trHTML += response.score_range[j].type + '(' + response.score_range[j].low_range + '-' + response.score_range[j].up_range + ')' + '</option>';
                
            
            trHTML += +'</select>' +
                '</td></tr>';
        );
        $('#tbl_report').html(trHTML);

    
    else 
        trHTML = '<tr style="text-align: center"><td colspan="8">' + 'هیچ اطلاعاتی یافت نشد' + '</td></td>';
        $('#tbl_report').html(trHTML);

【讨论】：

以上是关于当 Ajax 响应来自使用 select2 的 laravel 控制器时，如何检查 JQuery 附加选项中的条件？的主要内容，如果未能解决你的问题，请参考以下文章

动态填充 select2 下拉列表

在 jquery select2 中更改文本“搜索”

从 AJAX 响应中获取 ID 并将 ID 用于 Select2

当搜索没有返回结果时，Select2 过滤器值消失

Select2 错误 - 无响应

错误：当附加到 <select> 元素 woocommerce 时，Select2 不允许使用选项“ajax”