У меня есть 2 разных варианта выбора в форме.

Первый источник, второй статус. Я хотел бы иметь разные ОПЦИИ в моем раскрывающемся списке «Статус» в зависимости от того, какой ВАРИАНТ выбран в раскрывающемся списке «Источник».

Источник:

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

Статус:

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

</select>

Варианты: - Если Источник - РУЧНОЙ, то Статус ОТКРЫТ или ДОСТАВЛЕН - Если Источник - ОНЛАЙН, то Статус ОТКРЫТ или ДОСТАВЛЕН или ОТПРАВЛЕН

Моя нерабочая попытка:

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