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

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

0 голосов
/ 20 марта 2019 
<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 не работает, иначе это будет очень просто. Любая помощь будет оценена.

1 Ответ

0 голосов
/ 20 марта 2019

Вам необходимо изменить данные для всех трех выпадающих меню 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',
    });
...