How to check condition in JQuery append option when Ajax response come from laravel controller using select2?

user_11283695 0
Viewed 388

I want to compare two value when I append a select option whit jquery in a table, I want to compare if(response.score_range[j].score_range_id =+ item.score_range_id+) , it is equal the option should be selected by default, but i could not do this. if anyone knows, please help.

jquery code:-

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);

       }
 }

this is the dd(response(['student'=>$student,'score_range'=>$range])) result:

 +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"
    }
  ]
}
]
laravel html jquery
2 Answers

You can keep some variable and make that "" so if the condition matches assign value selected to it else "" then pass this variable inside your option tags.

Demo Code :

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>

user_106064000

append the select option inside the if condition, it has been working for me try it.

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);

    }
}
user_114353140
Related