Зависимые выпадающие списки в PHP и HTML - PullRequest
Новая
       26

Зависимые выпадающие списки в PHP и HTML

0 голосов
/ 17 июня 2019

Я пытался реализовать систему зависимых выпадающих списков.Код на странице contact.php: 

<?php 
    $link = new mysqli("localhost", "root", "", "graphicdesign");
    if($link->connect_error){
        die("ERROR: Nu s-a putut realiza conexiunea la baza de date " .$link->connect_error);
    }

    $resultSet = $link->query("SELECT * FROM orase") or die('Error In Session');
    /* $rowsn = mysqli_fetch_array($resultSet);
    $n_oras=$rowsn['denumire_oras'];
    $id_orasss=$rowsn['id_oras'];    */                                         

    //$resultSetRep = $link->query("SELECT id_oras, denumire_rep FROM reprezentante where id_oras='$id_oras'") or die('Error In Session');                                                  
    //$rows1= mysqli_fetch_array($resultSetRep);
?>

<!DOCTYPE HTML>
<html>

<head>
    --head info
</head>

<body>
    <form action="#">

        <div class="row form-group">
            <div class="col-md-12">
                <label style="margin-right:15px;">Oras</label>
                <select id="denum_oras" name="den_oras">
                    <?php
                        while($rows = mysqli_fetch_array($resultSet)) {
                            $n_oras=$rows['denumire_oras'];
                            $id_oras=$rows['id_oras'];                                              
                            echo "<option value='$id_oras'>$n_oras</option>";
                        }
                    ?>
                </select>
            </div>
        </div>

        <div class="row form-group">
            <div class="col-md-12">
                <label style="margin-right:15px;">Reprezentanta</label>
                <select id="reprez" name="reprez">
                    <?php
                        while($rows2=$resultSet->fetch_assoc()) {
                            $id_oras=$rows2['id_oras'];
                            $den_rep=$rows2['denumire_rep'];

                            $resultSetRep = $link->query("SELECT id_oras, denumire_rep FROM reprezentante where id_oras='$id_oras'") or die('Error In Session');

                            while($rows3=$resultSetRep->fetch_assoc()) {
                                $id_rep = $rows3['id_rep'];
                                $den_rep = $rows3 ['denumire_rep'];

                                echo "<option value='$id_rep'>$den_rep</option>";
                            }
                        } 
                    ?>
                </select>
            </div>
        </div>

    </form>
</body>

</html>

Первый раскрывающийся список работает, он выбирает нужные данные из таблицы "orase" в базе данных: enter image description here

Но для второго раскрывающегося списка я хочу, чтобы при выборе опции «Braila» из первого раскрывающегося списка показывались значения из базы данных с внешним ключом «id_oras» в качестве выбранного выбора.

В этом случае, когда я выбираю «Braila» из первого выпадающего списка, с id_oras = 1 в таблице orase, я хочу, чтобы второй выпадающий список извлекал данные из таблицы «preszentante»где id_oras = 1, в этом случае для извлечения значений «Rep Braila» и «Rep Braila 2», которые будут показаны в раскрывающемся списке, но этого не происходит ..

enter image description here

Это захват страницы: enter image description here

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

Спасибо!

Ответы [ 3 ]

0 голосов
/ 17 июня 2019

Вам нужно использовать Ajax для выполнения этой задачи.При использовании события onChange jquery при изменении значения родительского раскрывающегося списка соответственно заполняется дочерний или зависимый раскрывающийся список.

Пожалуйста, перейдите по этой ссылке: Заполните раскрывающийся список на основе выбора другого раскрывающегося списка, используя ajax

Надеюсь, это поможет.

0 голосов
/ 17 июня 2019

Как уже упоминали другие, вам нужно будет добавить немного Javascript в ваш код.

Ваш первый Select выглядит хорошо, но второй придется переписать.

Поместите событие onchange в ваш первый выбор следующим образом: 

<select name="list" id="list" onchange="update(this)">

И Div для хранения вашего второго выпадающего списка. 

<div id="secondlist">
    // contents of returned html from "getsecondlist.php" will go here
</div>

Затем поместите следующий Javascript между вашими тегами head.Это вызовет «getsecondlist.php» и передаст параметр idoras .«getsecondlist.php» вернет второй выпадающий список, который хранится в this.responseText. 

<script>
function update(e) {
    idoras = e.options[e.selectedIndex].value;

    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("secondlist").innerHTML = this.responseText;
        }
    };
    xhttp.open("GET", "getsecondlist.php?idoras=" + idoras, true);
    xhttp.send();
}
</script>

getsecondlist.php 

<div class="row form-group">
<div class="col-md-12">
    <label style="margin-right:15px;">Reprezentanta</label> 
    <select id="reprez" name="reprez">
        <?php
        $id_oras=$_GET['idoras'];
        $resultSetRep = $link->query("SELECT id_oras, denumire_rep FROM reprezentante where id_oras='$id_oras'") or die('Error In Session');

        while($rows3=$resultSetRep->fetch_assoc()) {
            $id_rep = $rows3['id_rep'];
            $den_rep = $rows3 ['denumire_rep'];
            echo "<option value='$id_rep'>$den_rep</option>";
        }
        ?>
    </select>
</div>
</div>

Получает $ _GET ['idoras']параметр, переданный из вызова Javascript.

Надеюсь, это поможет.

0 голосов
/ 17 июня 2019

PHP - это язык препроцессора, который не компилируется во время выполнения, вы можете использовать Ajax или XMLHttpRequest для получения данных.После этого вы можете использовать Jquery или javascript для привязки данных в поле выбора

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...