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

debugcn 发表于 Dev

齐亚敏

当我在表中附加一个选择选项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"
    }
  ]
}
]

斯瓦蒂

您可以保留一些变量，并使其保持一致，""以便如果条件匹配，则为该变量赋值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/[email protected]/dist/css/select2.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。