[Solved] How to grey out part of a form? [closed]

by


Thanks for improving your question. One approach you could take is to add a class to each professor option which indicates which majorID it’s associated with like this:

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

Then use jQuery to bind a javascript change event to the first select and add/remove options as needed:

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

15

solved How to grey out part of a form? [closed]