Javascript 如何将表单的一部分灰显？

我正在创建一个网站，让学生可以看到教授的统计数据

这是表格的代码

<?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"; ?>

如何让第二个选择仅显示用户在第一个选择中选择的专业的教授

教授，主修参考资料，主修数据库

---

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

您可以这样做：

<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中的ajax方法获取教授列表，并在ajax查询的回调函数中设置/取消设置元素的禁用属性。

感谢您对问题的改进。您可以采取的一种方法是在每个教授选项中添加一个类，以指示与哪个专业相关，如下所示：

<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>

---

第一件事第一..从重组数据库开始。你需要在professors表中有一个外键来连接Professor和majors。有一个。两张桌子都是主修课。我的问题是，我将如何灰显并用如下查询填充它：选择*来自majorID=TheMajorAtStudentChose的教授，其中majorID=TheMajorAtStudentChose你需要ajax来进行数据库操作，即筛选这看起来像是一个家庭作业，不需要任何努力来解决它。相信我，这个网站已经投入了很多精力。我只是一个javascript高手，我需要一些关于这个问题的指导。谢谢你的回答。我想要的是根据用户在第一次选择中选择的专业填充第二次选择。例如，如果用户选择了Major2，则在第二个select.send$.get/$.ajax中，他将只看到Major2的教授，如果$this[0]，则可以使用所选选项作为参数。selectedIndex！=0{作为更好的代码。不需要复制选择器。`我知道，但谢谢你给我提示。只是在小提琴上有一个输入错误，不起作用，把它改成选择器，然后又改回来，但没有保存：谢谢你。我现在正在研究它。好主意。但是我不能让它起作用。可能我把某物放错地方了。我告诉过你我不是在jquery中的ob！我会研究我的ajax，一旦我让它工作起来，我会回来找你。你可能不需要ajax来做这个…对于这种场景来说，这有点太多了。另外，我更新了我的答案，因为你需要在页面加载上隐藏所有的选项。你也可以用jquery来做这件事-我在这里使用了内联CSS。到底什么不起作用？请注意你在你发布的代码中有一个额外的？>去掉它，然后将我给你的脚本粘贴到main的底部，它应该可以工作。确保你的页面中包含jQuery library 1.8+。正确。在任何一种情况下，都有一个jQuery插件，它可能会引起兴趣，也可以处理AJAX：

<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>