Заполнение другого выпадающего списка из базы данных на основе выбора выпадающего списка

Я создаю веб-сайт для изучения кодирования и пытаюсь создать инструмент, в котором пользователь нажимает кнопку выбора / выпадающего списка, содержащую некоторые имена категорий, вытащенные из базы данных, а затем появляется другой выбор с именами подкатегорий, выведенными из подкаталога базы данных. Это почти так же, как Yelp's (перейти к категориям), как Yelp's (перейти к категориям) .

Я также сделал диаграмму:

введите описание изображения здесь

У меня уже есть раскрывающийся список категорий, который вытаскивает из базы данных cat :

<p><b>Category:</b><br /> <?php $query="SELECT id,cat FROM cat"; $result = mysql_query ($query); echo"<select name='cselect3' class='e1'><option value='0'>Please Select A Category</option>"; // printing the list box select command while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt echo "<option value=\"".htmlspecialchars($catinfo['cat'])."\">".$catinfo['cat']." </option>"; } echo"</select>"; ?>

И у меня есть subcat, который вытаскивает из базы данных subcat:

 <p><b>Subcat1:</b><br /> <?php $query="SELECT id,subcat FROM subcat"; $result = mysql_query ($query); echo"<select name='sselect1' class='e1'><option value='0'>Please Select A Category</option>"; // printing the list box select command while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt echo "<option value=\"".htmlspecialchars($catinfo['subcat'])."\">".$catinfo['subcat']."</option>"; } echo"</select>"; ?>

Как создать раскрывающийся список подкатегорий в зависимости от того, что пользователь нажимает на категорию и автоматически ли появляется? Большое спасибо за любую помощь!

Related of "Заполнение другого выпадающего списка из базы данных на основе выбора выпадающего списка"

Я просто хотел бы поставить переменные в javascript с помощью php, а затем использовать javascript-функции. Нет jquery или AJAX.

Однако вам нужно иметь внешний ключ для подкатегорий независимо от того, что .. ie – для каждой записи в таблице subcat вам нужно дать ей catid, поэтому для ссылки …

 <?php $db = new mysqli('localhost','user','password','dbname');//set your database handler $query = "SELECT id,cat FROM cat"; $result = $db->query($query); while($row = $result->fetch_assoc()){ $categories[] = array("id" => $row['id'], "val" => $row['cat']); } $query = "SELECT id, catid, subcat FROM subcat"; $result = $db->query($query); while($row = $result->fetch_assoc()){ $subcats[$row['catid']][] = array("id" => $row['id'], "val" => $row['subcat']); } $jsonCats = json_encode($categories); $jsonSubCats = json_encode($subcats); ?> <!docytpe html> <html> <head> <script type='text/javascript'> <?php echo "var categories = $jsonCats; \n"; echo "var subcats = $jsonSubCats; \n"; ?> function loadCategories(){ var select = document.getElementById("categoriesSelect"); select.onchange = updateSubCats; for(var i = 0; i < categories.length; i++){ select.options[i] = new Option(categories[i].val,categories[i].id); } } function updateSubCats(){ var catSelect = this; var catid = this.value; var subcatSelect = document.getElementById("subcatsSelect"); subcatSelect.options.length = 0; //delete all options if any present for(var i = 0; i < subcats[catid].length; i++){ subcatSelect.options[i] = new Option(subcats[catid][i].val,subcats[catid][i].id); } } </script> </head> <body onload='loadCategories()'> <select id='categoriesSelect'> </select> <select id='subcatsSelect'> </select> </body> </html>

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

 // warning sub optimal jquery code $(function(){ // listen to events on the category dropdown $('#cat').change(function(){ // don't do anything if use selects "Select Cat" if($(this).val() !== "Select Cat") { // subcat.php would return the list of option elements // based on the category provided, if you have spaces in // your values you will need to escape the values $.get('subcat.php?cat='+ $(this).val(), function(result){ $('#subcat').html(result); }); } }); });

Если вы используете AJAX, вам нужно, чтобы второй бит кода был отдельным файлом php, который вы вызываете через AJAX. в someContainingDivOrSomething.innerHtml = responseBody; вызове из вызова AJAX просто выполните (псевдокод): someContainingDivOrSomething.innerHtml = responseBody; ,

Обратите внимание, что в целом плохая идея делать запросы непосредственно в ваших файлах отображения PHP (разделение проблем). Есть несколько других вещей, которые можно было бы улучшить. Однако это поможет вам начать.

сделать эту структуру html на целевой странице

 <p><b>Category:</b><br /> <?php $query="SELECT id,cat FROM cat"; $result = mysql_query ($query); echo"<select name='cselect3' onChange='loadSubCats(this.value)' class='e1'><option value='0'>Please Select A Category</option>"; // printing the list box select command while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt echo "<option value=\"".htmlspecialchars($catinfo['cat'])."\">".$catinfo['cat']." </option>"; } echo"</select>"; ?> <div id='sub_categories'></div>

сделать функцию js, присвоенную раскрывающемуся списку категорий

 function loadSubCats(value) { $.post('load_sub_cats.php',{catid : value},function{data} { $('#sub_categories').html(data); }); }

теперь в вашем load_sub_cats.php

 <p><b>Subcat1:</b><br /> <?php $catid = $_POST['cat_id'] $query="SELECT id,subcat FROM subcat where catid = $catid"; $result = mysql_query ($query); echo"<select name='sselect1' class='e1'><option value='0'>Please Select A Category</option>"; // printing the list box select command while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt echo "<option value=\"".htmlspecialchars($catinfo['subcat'])."\">".$catinfo['subcat']."</option>"; } echo"</select>"; ?>

Вам нужно будет включить jquery в эту работу кода.