Mam 2 różne opcje SELECT w formularzu.

Pierwszy to Źródło, drugi to Status. Chciałbym mieć różne opcje na mojej liście rozwijanej Status, w zależności od opcji wybranej na liście rozwijanej Moje źródło.

Źródło:

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

Status:

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

</select>

Opcje: - Jeśli źródło jest RĘCZNE, stan jest OTWARTY lub DOSTARCZONY - Jeśli źródłem jest ONLINE, wtedy status jest OTWARTY lub DOSTARCZONY lub WYSYŁANY

Moja niepracująca próba:

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