There is the following function that displays a form in which there are 2 fields with a list of data from a table with a hierarchy. How do I make these 2 combo boxes dependent so that when you select a value in the first field, the corresponding fields are displayed in the second field.

function input_recipe() { // Создаём выпадающий список 1 $dropDown = '<select name="cat_name">'; $query = mysql_query('select * from category where level = 1'); if (mysql_num_rows($query)) { while ($cat = mysql_fetch_array($query)) { $dropDown .= sprintf( '<option value="%s">%s</option>', $cat["id_category"], $cat["name"] ); } } $dropDown .= '</select>'; // Создаём выпадающий список 2 $dropDown2 = '<select name="cat2_name">'; $query = mysql_query('select * from category where level = 2'); if (mysql_num_rows($query)) { while ($cat = mysql_fetch_array($query)) { $dropDown2 .= sprintf( '<option value="%s">%s</option>', $cat["id_category"], $cat["name"] ); } } $dropDown2 .= '</select>'; // Вставляем их в форму. $txt = sprintf("<form method='post'><table> <tr> <td style='text-align: center; font-weight: bold;'>Категория</td> <td style='text-align: center; font-weight: bold;'>Категория</td> <td style='text-align: center; font-weight: bold;'>Название</td> <td style='text-align: center; font-weight: bold;'>Описание</td> </tr> <tr> <td>%s</td><td>%s</td> <td><input type='text' name='recipe_name' id='recipe_name'></td> <td><input type='text' name='recipe_description' id='recipe_description'></td> </tr> <tr> <td colspan='4' style='text-align: center'><input type='submit' value='Добавить запись'></td> </tr> </table></form>", $dropDown, $dropDown2 ); return $txt; }
  • Start using javascript - u_mulder
  • Well, logically, the number of records must match in both tables, so that there is no confusion. And then it will be possible to output in 2 cycles. And if the number of records is different, then bind one table to another according to the ID for example, and check the records by id. - user190134

1 answer 1

In order for this all to work without permanently reloading the page after each selection, you need to use JavaScript and ajax. The idea is this: in JavaScript, you hang up the handler to change the value of the field of the first list, to change the value in the first drop-down list, send an ajax request, passing the identifier of the selected category, which runs the php script, which will return the corresponding positions for the second list, after ajax is working the contents of the DOM element of the second list, filling it with the received positions. The example is trivial, so I advise you to drive into the search engine " javascript ajax ", " jquery ajax " and deal with the technology (this can be done in 40 minutes for a quick start, but learn how to properly use everything and write clear and supported js code, without using any -or frameworks - this is not an easy task, comes only with experience and then not all, many of the above "quick start" relaxes and leaves forever at the level of bydlokoda).

But if you try to do everything in PHP, then, as I said, you need to come to terms with the need to reload the page, after each change of category. For example, add the "Open category" button, which would refer to the same form as the first drop-down list. By clicking on this button, send a request ( GET or POST , not so important) to the same page in which to transmit the identifier of the selected category. In the script, add a check that if the passed identifier came to the input, then generate a second drop-down list, passing the received identifier to the SQL query for sampling, and thus collect only the relevant items.