如何使表格的一部分变灰？ [关闭]答案

【问题标题】：How to grey out part of a form? [closed]如何使表格的一部分变灰？ [关闭]
【发布时间】：2015-04-04 09:39:02
【问题描述】：

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

这是表单的代码

<?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) 的解决方案？

【问题讨论】：

首先要做的事..从重组你的数据库开始。您需要在 professors 表中有一个外键，它将教授连接到 majors..
有一个。两个表都有majorID。我的问题与我如何将
您需要 ajax 来进行数据库操作（即过滤）
这看起来像是一个家庭作业，没有尝试解决它
大家相信我已经为这个网站付出了很多努力。我只是 javascript 的菜鸟，我需要一些关于这件事的指导。

标签： javascript php jquery html css

【解决方案1】：

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

<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 事件绑定到第一个选择并根据需要添加/删除选项：

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

【讨论】：

好主意。但是我不能让它工作。可能我把某事放在了错误的地方。告诉你我是 jquery 的菜鸟！我会研究我的 ajax 并在我成功后回复你
你可能不需要 ajax 来做这个......对于这种场景 imo 来说有点多
另外，我更新了我的答案，因为您最初需要在页面加载时隐藏所有教授选项。你也可以用 jQuery 来做——我在这里使用了内联 CSS。
究竟是什么不起作用？另请注意，您发布的代码中有一个额外的?>。摆脱它并将我给你的脚本粘贴到主<div> 的底部，它应该可以工作。并确保在您的页面上包含 jQuery 库 1.8+。
正确。在任何一种情况下，都有一个 jQuery 插件可能很有趣，并且还可以处理 AJAX：appelsiini.net/projects/chained

【解决方案2】：

你可以这样做：

Example JsFiddle

<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);
}});

【讨论】：

感谢您的回答。我想要的是根据用户在第一次选择中选择的专业来填写第二次选择。例如，如果用户选择了 Major2，那么他将在第二次选择中只看到 Major2 的教授。
发送一个 $.get / $.ajax 到您的服务器，并将所选选项作为参数
您可以使用if($(this)[0].selectedIndex != 0){ 作为更好的代码。无需复制选择器。 `
我知道，但感谢您提供提示。只是之前在小提琴中有一个错字并没有工作，将其更改为选择器然后返回，但没有保存:)

【解决方案3】：

使用 jQuery 的 ajax 方法获取教授列表，并在 ajax-query 的回调函数中设置/取消设置元素的“禁用”属性。

【讨论】：

谢谢。我现在正在调查。