我有三个下拉列表，我希望当我选择第一个下拉列表的值时，该值不应出现在第二个下拉列表中

Question

<select class="js-example-templating" name="mem1">
            <?php
              $query = "select * from user";
              $query_result = query($query);
            while($row = fetch_array($query_result)) {
                echo "<option value='{$row['user_id']}'>{$row['user_id']} - {$row['name']}</option>";
            }
            ?>
          </select>
          <br><br>
          <select class="js-example-templating" name="mem2">
            <?php
              $query = "select * from user";
              $query_result = query($query);
            while($row = fetch_array($query_result)) {
                echo "<option value='{$row['user_id']}'>{$row['user_id']} - {$row['name']}</option>";
            }
            ?>
          </select>
          <br><br>
          <select class="js-example-templating" name="mem3">
            <?php
              $query = "select * from user";
              $query_result = query($query);
            while($row = fetch_array($query_result)) {
                echo "<option value='{$row['user_id']}'>{$row['user_id']} - {$row['name']}</option>";
            }
            ?>
          </select>

function formatState (state) {
  if (!state.id) {
    return state.text;
  }
    var $state = $(
    '<span>' + state.text + '</span>'
  );
  return $state;
};
$(".js-example-templating").select2({
  templateResult: formatState
});
</script>

我有 3 个下拉列表，我希望当我选择第一个下拉列表中的值时，该值不会出现在第二个和第三个下拉列表中，当我选择第二个下拉列表的值时，该值不会出现在第三个下拉列表中。我正在使用 Select2 库在下拉列表中进行实时搜索，并且由于该 select2 库，AJAX 调用不起作用，否则它将非常容易。任何帮助将不胜感激。

Answer 1

您需要更改所有三个 select2 下拉菜单的数据。现在，您为所有三个下拉菜单提供相同的数据。您可以在这里尝试两种方法：

1.创建一个具有初始值的数组。当第一个下拉列表选择某个值时，将除所选值之外的数组值复制到不同的数组。现在将此数组用于第二个下拉列表。您可以在下拉菜单上使用 onchange 事件来检测更改并更新数组以用于下一个下拉菜单。

<select class="js-example-templating1" name="mem1" onchange="updateNextArray()">
        <?php
          $query = "select * from user";
          $query_result = query($query);
        while($row = fetch_array($query_result)) {
            echo "<option value='{$row['user_id']}'>{$row['user_id']} - {$row['name']}</option>";
        }
        ?>
      </select>
      <br><br>
      <select class="js-example-templating2" name="mem2" onchange="updateNextArray()">
        <?php
          $query = "select * from user";
          $query_result = query($query);
        while($row = fetch_array($query_result)) {
            echo "<option value='{$row['user_id']}'>{$row['user_id']} - {$row['name']}</option>";
        }
        ?>
      </select>
      <br><br>
      <select class="js-example-templating3" name="mem3" onchange="updateNextArray()">
        <?php
          $query = "select * from user";
          $query_result = query($query);
        while($row = fetch_array($query_result)) {
            echo "<option value='{$row['user_id']}'>{$row['user_id']} - {$row['name']}</option>";
        }
        ?>
      </select>
<script>
function updateNextArray(){
//update array here
}
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({
data: Array2,
templateResult: formatState
});
$(".js-example-templating3").select2({
data: Array3,
templateResult: formatState
});
</script>

2.AJAX只要使用得当就可以工作。

$(".js-example-templating").select2({
    ajax: {
        url: '../../subjects.json', // or api endpoint which supplies the array
        dataType: 'json',
    });