У меня есть три раскрывающихся списка, и я хочу, чтобы при выборе значения первого раскрывающегося списка это значение не отображалось во втором раскрывающемся списке с помощью библиотеки select2

Question

    <select class="js-example-templating1" id="first_drop">
                <option></option>
              </select>
              <select class="js-example-templating2">
                <option></option>            
              </select>
              <select class="js-example-templating3">
                <option></option>
      </select>

Это код Javascript

<script>
  var array2;
<?php
  $data = array();
  $query = "select * from user;
  $query_result = query($query);
  $i=0;
  while($row = fetch_array($query_result)) {
    $data[$i]["id"] = $row['user_id'];
    $data[$i]["text"] = $row['user_id']." - ".$row['name'];
    $i=$i+1;
  }
  $data_user =  json_encode($data);
?>
var array1 = <?php echo $data_user; ?>;
function formatState (state) {
  if (!state.id) {
    return state.text;
  }
    var $state = $(
    '<span>' + state.text + '</span>'
  );
  return $state;
};
$(".js-example-templating1").select2({
  data: array1,
  templateResult: formatState
});
  $(".js-example-templating2").select2({
    ajax:{
      url: 'fetch_data.php',
      type:'post',
      dataType: 'json',
      delay: 250,
      data: function(params) {
        var first_drop = parseInt(document.getElementById("first_drop").value);
        return {
          searchTerm: params.term,
          first_drop : first_drop
        };
      },
      processResults: function(response){
        return {
          results: response
        };
      },
      cache: true
    },
});
$(".js-example-templating3").select2({
  data: array1,
  templateResult: formatState
});

файл fetch_php

if (!(isset($_POST['searchTerm']) and isset($_POST['first_drop']))) {
      $query2 = "select * from user";
    }elseif(isset($_POST['searchTerm']) and isset($_POST['first_drop'])){
      $drop_1 = escape_string($_POST['first_drop']);
      $stri = escape_string($_POST['searchTerm']);
      $query2 = "select * from user where user_id != ".$drop_1." and name LIKE '".$stri."%'";
    }elseif(isset($_POST['searchTerm']) and !isset($_POST['first_drop'])){
      $stri = escape_string($_POST['searchTerm']);
      $query2 = "select * from user where name LIKE '".$stri."%'";
    }elseif(!isset($_POST['searchTerm']) and isset($_POST['first_drop'])){
      $drop_1 = escape_string($_POST['first_drop']);
      $query2 = "select * from user where user_id != ".$drop_1;
    }
    $query_result2 = query($query2);
    $i=0;
    while($row2 = fetch_array($query_result2)) {
      $data2[$i]["id"] = $row2['user_id'];
      $data2[$i]["text"] = $row2['user_id']." - ".$row2['name'];
      $i=$i+1;
    }
    echo json_encode($data2);

Проблема, с которой я сталкиваюсь, заключается в том, что при выборе первого раскрывающегося списка обновление не будет отображаться во втором раскрывающемся списке. Во втором выпадающем меню отображаются все данные. Я проверяю данные первого раскрывающегося списка, при открытии второго раскрывающегося списка значение есть, но оно не обновляет второе раскрывающееся меню. fetch_data.php используется для вызова ajax. Значение первого раскрывающегося списка извлекается с использованием getElementById.