Выпадающий список, заполненный PHP, onchange заполняет другой выпадающий список на основе значения

#javascript #php #ajax #forms #dropdown

#javascript #php #ajax #формы #выпадающий список

Вопрос:

Привет, итак, вот мой вопрос,

У меня есть база данных, содержащая категории и подкатегории. У меня есть два выпадающих списка (выберите). Я хочу, чтобы они оба были заполнены с помощью PHP / MYSQL.

Мои категории были сгенерированы:

 <select name="prod_cat">
    <?php
        include("php/dbconnect.php");

        $sql = "SELECT * FROM categories";
        $result = mysqli_query($conn, $sql);

        if (mysqli_num_rows($result) > 0){
            while ($row = mysqli_fetch_array($result))
            {
            echo '<option value="'. $row["cat_name"] .'">'. $row["cat_name"] .'</option>';
            }
        }
        else{echo "No categories were found!";}
        mysqli_close($conn);
    ?>
</select>

Я хочу, чтобы подкатегории загружались при изменении категории.
Мой SQL будет выглядеть примерно так:

 SELECT subcat_name FROM subcategories WHERE cat_name = '$prod_cat'

Мне нужно получить значение из раскрывающегося списка категорий и сохранить его как переменную.
В прошлом я делал что-то подобное в javascript:

 var subcat=document.forms["form"]['subcat'].value;

а затем изменил значение другого выпадающего списка, вызвав onChange(); функция, подобная:

 document.getElementById('subcat').innerHTML='<option value=""></option>';

Я надеюсь, что кто-то может указать мне правильное направление! Должен ли я изучать AJAX, JavaScript или все это можно сделать с помощью PHP?

Спасибо.

1. для этого вам следует использовать jquery в сочетании с AJAX. то, что вы хотите получить, не может быть сделано только на php, потому что php — это серверная часть, а JavaScript и выпадающий список — клиентская. однако вы можете использовать jquery для выполнения функции «onChange» для выпадающего списка, а затем вызвать PHP-скрипт через AJAX для вставки материала. надеюсь, это поможет.

Ответ №1:

добавьте идентификатор в поле выбора категории, например —

 <select name="prod_cat" id="prod_cat">
    <?php
        include("php/dbconnect.php");

        $sql = "SELECT * FROM categories";
        $result = mysqli_query($conn, $sql);

        if (mysqli_num_rows($result) > 0){
            while ($row = mysqli_fetch_array($result))
            {
            echo '<option value="'. $row["cat_name"] .'">'. $row["cat_name"] .'</option>';
            }
        }
        else{echo "No categories were found!";}
        mysqli_close($conn);
    ?>
</select>

для подкатегории —

 <select id='sub_cat' name='sub_cat'></select>

напишите свой скрипт примерно так —

 <script>
$("#prod_cat").change(function(){
    //get category value
    var cat_val = $("#prod_cat").val();
    // put your ajax url here to fetch subcategory
    var url             =   'www.example/fetch_subcategory.php';
    // call subcategory ajax here 
    $.ajax({
                   type:"POST",
                   url:url,
                   data:{
                       cat_val : cat_val
                   },

                   success:function(data)
                    {
                        $("#sub_cat").html(data);
                    }
                });
});
</script>

добавьте код на страницу вызова ajax — ‘www.example/fetch_subcategory.php ‘

 <?php
$prod_cat = $_POST['cat_val'];

$sql = "SELECT subcat_name FROM subcategories WHERE cat_name = '$prod_cat'";
       $result = mysqli_query($conn, $sql);
$msg ='';
        if (mysqli_num_rows($result) > 0){
            while ($row = mysqli_fetch_array($result))
            {
           $msg =.'<option value="'. $row["sub_cat_name"] .'">'. $row["sub_cat_name"] .'</option>';
            }
        }
        else{$msg .="No categories were found!";}
        echo $msg;
        mysqli_close($conn);

        ?>

Сделайте что-то подобное и надейтесь, что это сработает для вас.