Select box value depending on other selected box option - MySQL, JS, HTML

时间:2018-05-14 17:38:24

标签: javascript php html mysql

I'm making a online system for taking test as you would be taking in school. You'r student account would be bound to a class and your teachers would give you tests to complete for a grade or to practice.

At this point I'm in the stage where the teacher chooses his class or subject (Math, English, History etc.) in one select box. Then once they choose their subject they would be presented with a new select option box to select a field (Algebra, Trigonometry etc.).

My problem at this point is that once they choose a subject, Math for example, I want the new select box to (if possible) pull data form my database and check for the fields that are associated to that subject. So for math they would get option to choose algebra or trigonometry or other.

I'm not looking for complete code but snippets of code and explanation of that code would go a long way.

Currently i am pretty well familiar with PHP, HTML and CSS. I am currently learning how to use JS in my website.

What I came up: Script that is used to get the choice

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    $("#subjectSelect").change(function() {
    $("#fieldSelect").load("getter.php?choice=" + $("#subjectSelect").val());
    });
</script>

Getter.php

<?php include "includes/dbc.inc.php"?>
<?php session_start();?>
<?php
$choice = mysql_real_escape_string($_GET['choice']);
$query = "SELECT * FROM fielda WHERE field_subj_id='$choice'";
$result = mysql_query($query);
while ($row = mysql_fetch_array($result)) {
    echo '<option value="'.$row['field_id'].'">' . $row['field_name']} . '</option>';
}

Website Code:

case "fieldquesadd":
            echo '
                <fieldset align="left">
                    <legend>Unos pitanja</legend>
                    <p>
                        <label for="subject">
                            <span>Predmet:  </span>
                        </label>
                        <select name="subject" required id="subjectSelect">
                            <option value=""></option>
                        ';
            $querySubjects = "SELECT * FROM subject";
            $resultSubjects = mysqli_query($conn, $querySubjects);
            while ($row_subjects = mysqli_fetch_array($resultSubjects)) {
                echo '<option value="' . $row_subjects['subj_id'] . '">' . $row_subjects['subj_name'] . '</option>';
            }

            echo '
                        </select>
                    </p>
                    <p id="fieldSet">
                        <label for="fieldSet">
                            <span>Gradivo: </span>
                        </label>
                        <select name="fieldSet" id="fieldSelect" required>

                        </select>
                    </p>
                </fieldset>
            ';
            break; //case "fieldquesadd"

1 个答案:

答案 0 :(得分:1)

我可以建议的是将新的选择框设为display:none; 直到选择某些内容并且您可以在选择时使用js显示

selector.style.display="block";

参考 How to display div after click the button in Javascript?

从选择框中获取值

参考

Get selected option text with JavaScript

使用php $_POST['name']方法

从该选择框中搜索值

执行SQL查询以在新选择框中创建值,就像使用sql和php在表中显示内容一样。

或参考 Display Mysql table field values in Select box