Как заполнить выпадающий список из mysql db и на основе выбора заполнить другой раскрывающийся список в форме php?

Question

У меня есть ситуация, когда у меня есть столбец в таблице mysql, из которой я заполняю раскрывающийся список для критериев запроса для второго раскрывающегося списка из другой таблицы. Как я могу сделать, что использование php и выбор второго раскрывающегося списка переходят в другую форму ввода? У меня одинаковый столбец formBarkod в обеих таблицах, который является соединением между данными таблиц.

Answer 1

Это звучит как работа для javascript. Вы можете заполнить каждый из выпадающих списков с помощью php и mysql, но вам понадобится javascript, чтобы иметь выбор в первом раскрывающемся списке, из которого видно из следующих выпадающих списков. PHP и MySQL будут выглядеть так:

<? 
//Assuming $dbh is a proper mysqli object... 
$options = $dbh->query("SELECT * FROM options"); 

echo '<select id="firstDropdown">'; 
while($o = $options->fetch_object()) { 
    echo '<option value="'.$o->id.'">'.$o->name.'</option>'; 
} 
?> 

Повторите этот процесс для каждого раскрывающегося меню.

Затем вам нужно написать javascript для работы над изменением. Я не знаю достаточно «чистого» javascript, чтобы сделать это, но я могу показать вам, как он будет выглядеть в jQuery. Предположим, что ваш HTML выглядит следующим образом:

<select id="firstDropdown"> 
    <option value="1">Option 1</option> 
    <option value="2">Option 2</option> 
    <option value="3">Option 3</option> 
</select> 
<select id="dropdown1" class="dropdown"> 
    ... 
</select> 
<select id="dropdown2" class="dropdown"> 
    ... 
</select> 
<select id="dropdown3" class="dropdown"> 
    ... 
</select> 

Тогда JQuery будет выглядеть следующим образом (все обернутые в document.ready() конечно)

$(".dropdown").hide(); 

$("#firstDropdown").on("change",function(){ 
    $(".dropdown").hide(); 
    var value = $("#firstDropdown").val(); 
    $("#dropdown"+value).show(); 
}); 

Основной поток является то, что вы скрываете все вторичные выпадающие списки. Затем, всякий раз, когда значение в первом раскрывающемся списке изменяется, вы возвращаете вторичные выпадающие списки и показываете только нужное выпадающее меню. Вы можете сделать намного больше с этим, фактически создавая элементы dom на лету или используя вызов ajax, чтобы получить новые выпадающие списки, но это охватывает основную концепцию.

EDIT: Вот рабочий пример на jsfiddle.net