У меня есть два отдельных раскрывающихся списка. Мне нужно, чтобы каждый выпадающий список фильтровал друг друга. Каждый пример, который я видел до сих пор, представляет собой пример для выпадающих списков с жестко заданными параметрами. Mine использует запрос для заполнения параметров.
Итак, как я могу правильно настроить каждое выпадающее меню?
Вот мой HTML для выпадающих списков:
<select id="collector" onchange="showUser(this.value)"> <option value="" selected disabled>Collector Name</option> <?php foreach($collect->fetchAll() as $name) { ?> <option class="<?php echo $name['Collector Name'];?>" value="<?php echo $name['Collector Name'];?>"><?php echo $name['Collector Name'];?></option> <?php } ?> </select> <select id="date" onchange="showUser(this.value)"> <option value="" selected disabled>Bill Date</option> <?php foreach($bill_date->fetchAll() as $date) { ?> <option class="<?php echo $date['Date'];?>" value="<?php echo $date['Date'];?>"><?php echo $date['Date'];?></option> <?php } ?> </select> Это JavaScript, который у меня до сих пор, однако, если я делаю console.log(classN) , все, что он делает, это всего лишь регистрация всех дат. На самом деле он ничего не фильтрует:
$(document).ready(function () { var allOptions = $('#date option') $('#collector').change(function () { $('#date option').remove(); var classN = $('#collector option:selected').prop('class'); var opts = allOptions.filter('.' + classN); console.log(opts); $.each(opts, function (i, j) { $(j).appendTo('#date'); }); }); });
jquery не может запустить php на странице после ее загрузки. Вы можете использовать ajax, выполнив запрос, чтобы получить второй набор параметров из другого файла.
<select id="collector"> <?php //code to generate initial collector options ?> </select> <select id="date"> <option>--Bill Date--</option> </select>
В вашем jquery настройте первое раскрывающееся меню, а затем используйте load () для вызова php-файла
$(document).ready(function(){ $("#collector").on('change', function(){ filterItems(this.value); }); }); function filterItems(value){ var destination = "#date"; var url = "path/to/filterCode.php?v="+value; $(destination).load(url); });
В файле php filterCode получите значение, выбранное пользователем
$selectedCollector = $_GET['v'];
Затем используйте $ selectedCollector для запроса вашей базы данных и получения соответствующих параметров даты.
Затем внутри цикла результатов:
echo '<option class="'.$date['Date'].'" value="'.$date['Date'].'">'.$date['Date'].'</option>';
Нагрузка () примет эти эховые параметры и поместит их в #date.
Я думаю, вам нужно заполнить раскрывающийся #date на основе раскрывающегося #date #collector , согласно мне лучшим вариантом является ajax.
вот какой-то базовый пример,
<select id="collector"> <option value=""></option> </select>
jut считают, что в качестве раскрывающегося #collector будут некоторые параметры, основанные на ваших данных. Теперь вам нужно заполнить раскрывающийся #date ,
<select id="collector"> <option value=""></option> </select>
При загрузке страницы вы можете загрузить все данные, если хотите.
при изменении раскрывающегося #collector вы можете отправить запрос ajax и получить данные из базы данных на основе значения #collector , например
$("#collector").on('change', function(){ $.ajax({ type: method, url: url, data: data, success: function(response) { //populate select box } }); });
Ниже ссылки будут полезны,
Как использовать функцию jQuery $ .ajax ()
Выделить выпадающий список с помощью массива с помощью jQuery