如何使表格的一部分变灰

我正在创建一个网站，学生可以在这里查看教授的统计数据。

这是表格的代码

<?php
$pageName = "statisitcsForm.php";
$pageTitle = "Statistics Form";
include("../inc/config.php");
require(SITE_ROOT . "inc/db.php");
include(SITE_ROOT . "inc/header.php");

try {
    $results = $db->query("
    SELECT *
    FROM professors
    ORDER BY professorLastName");
    $results2 = $db->query("
    SELECT *
    FROM majors
    ORDER BY majorID");
} catch (Exception $e) {
    echo "Data could not be retrieved from the database.";
    exit;
}
$professors = $results->fetchAll(PDO::FETCH_ASSOC);
$majors = $results2->fetchAll(PDO::FETCH_ASSOC);

?>

    <div id="statisticsFormBody">
        <form action="../php/statistics.php" method="post">
            <div class="form-div">
                <h3><label for="major"> First Select Major: </label> <br></h3>
                <select class="form-input" id="major" name="major">
                    <?php
                    foreach ($majors as $major) { ?>
                        <option value="<?php echo $major['majorID']; ?>"> <?php echo $major['majorName'] ?> </option>
                    <?php
                    } ?>
                    ?>
                </select>
            </div>
            <div class="form-div">
                <h3><label for="prof"> Then Select Professor: </label> <br></h3>
                <select class="form-input" id="prof" name="prof">
                    <?php
                    foreach ($professors as $prof) { ?>
                        <option
                            value="<?php echo $prof['professorID']; ?>"> <?php echo $prof['professorLastName'] . ' ' . $prof['professorFirstName'] ?> </option>
                    <?php
                    } ?>
                    ?>
                </select>
            </div>
            <div class="form-div">
                <input type="submit" class="form-btn" id="Go" name="Go" value="Go">
                <button type="reset" class="form-btn"> Clear</button>
            </div>
        </form>
    </div>

<?php include SITE_ROOT . "inc/footer.php"; ?>

如何使第二个选择仅显示用户在第一个选择中选择的majorID中的教授？

professor.majorID引用数据库中的majors.majorID。

也许是使用jquery（AJAX）的解决方案？

感谢您改进您的问题。你可以采取的一种方法是在每个教授选项中添加一个类，这表明它与哪个majorID相关，如下所示：

<div class="form-div">
    <h3><label for="prof"> Then Select Professor: </label> <br></h3>
    <select class="form-input" id="prof" name="prof">
        <?php foreach ($professors as $prof) { ?>
            <option class="major-<?php echo $prof['majorID']; ?>" value="<?php echo $prof['professorID']; ?>"> <?php echo $prof['professorLastName'] . ' ' . $prof['professorFirstName'] ?> </option>
        <?php } ?>
    </select>
</div>

然后使用jQuery将javascript change事件绑定到第一个select，并根据需要添加/删除选项：

<script>
    $( document ).ready(function() {
        profOptions = $("#prof option"); // store all options as a jQuery object
        $("#major").trigger("change"); // trigger change on first select
    });
    $("#major").on("change", function() { // this event will fire anytime first select is changed
        var majorID = this.value; // get value of first select
        $("#prof option").remove(); // remove all professor options
        profOptions.each( function() { // iterate through options
            if ($(this).hasClass("major-" + majorID)) { // check if option has matching classname
                $("#prof").append($(this)); // append option to second select
            }
        });
    });
</script>

你可以这样做：

Js报价示例

<body>
<form>
    <select id="major">
        <option>Choose Major</option>
        <option>Major1</option>
        <option>Major2</option>
    </select><br/>
    <select id="profs" disabled>
        <option>Choose Prof</option>
        <option>Prof1</option>
        <option>Prof2</option>
    </select>
</form>
</body>
$('#major').on('change', function(){
if($('#major')[0].selectedIndex != 0){
    $('#profs').prop("disabled", false);
} else {
    $('#profs').prop("disabled", true);
}});

使用jQuery中的ajax方法获取教授列表，并在ajax查询的回调函数中设置/取消设置元素的"disabled"属性。

相关内容

最新更新

热门标签：