javascript - 下拉框依赖于在另一个下拉框中选择的选项

Question

我在一个表单中有 2 个不同的 SELECT OPTION。

第一个是Source，第二个是Status。我希望在我的状态下拉列表中有不同的选项，具体取决于在我的源下拉列表中选择的选项。

来源:

<select id="source" name="source">
     <option>MANUAL</option>
     <option>ONLINE</option>
</select>

状态:

<select id="status" name="status">

</select>

选项:- 如果 Source 是 MANUAL，则 Status 是 OPEN 或 DELIVERED- 如果来源在线，则状态为打开或已交付或已发货

我的无效尝试:

            <script>
            $(document).ready(function () {
            var option = document.getElementById("status").options;
            if (document.getElementById('source').value == "MANUAL") {
                $("#status").append('<option>OPEN</option>');
                $("#status").append('<option>DELIVERED</option>');
                }
            if (document.getElementById('source').value == "ONLINE") {
                $("#status").append('<option>OPEN</option>');
                $("#status").append('<option>DELIVERED</option>');
                $("#status").append('<option>SHIPPED</option>');
                }
            });
            </script>

Answer 1

尝试这样的事情... jsfiddle demo

HTML

<!-- Source: -->
<select id="source" name="source">
     <option>MANUAL</option>
     <option>ONLINE</option>
</select>

<!-- Status: -->
<select id="status" name="status">
    <option>OPEN</option>
    <option>DELIVERED</option>
</select>

JS

$(document).on('ready', function () {

    $("#source").on('change', function () {
        var el = $(this);
        if (el.val() === "ONLINE") {
            $("#status").append("<option>SHIPPED</option>");
        } else if (el.val() === "MANUAL") {
            $("#status option:last-child").remove();
        }
    });

});