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。使用初始值创建一个数组。当通过1st下拉列表选择了某个值时，将选定值以外的数组值复制到其他数组。现在，将此数组用于第二个下拉列表。您可以在下拉列表上使用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',
    });

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

1 个答案: