我有三个下拉菜单，我希望当我 select 第一个下拉菜单的值时，该值不应出现在第二个下拉菜单中

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 个下拉菜单，我希望当我 select 第一个下拉菜单中的值时，该值不会出现在第二个和第三个下拉菜单中，而当我 select 第二个下拉菜单的那个值时，那么该值将不会出现在第三个下拉列表中。我正在使用 Select2 库在下拉列表中进行实时搜索，由于 select2 库，AJAX 调用无法正常工作，否则会非常容易。任何帮助将不胜感激。

Answer 1

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

1.Create 具有初始值的数组。当第一个下拉列表选择了某个值时，将除所选值之外的数组值复制到另一个数组。现在将此数组用于第二个下拉列表。您可以在下拉菜单上使用 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',
    });

我有三个下拉菜单，我希望当我 select 第一个下拉菜单的值时，该值不应出现在第二个下拉菜单中

I have three dropdown and I want that when I select the value of first dropdown, that value should not appear in second dropdown

javascript

jquery-select2