Tengo 2 diferentes opciones de selección en una forma.

El primero es Fuente, el segundo es Estado. Me gustaría tener diferentes OPCIONES en mi lista desplegable de Estado dependiendo de la OPCIÓN seleccionada en mi desplegable de Fuente.

Fuente:

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

Estado:

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

</select>

Opciones: - Si la fuente es MANUAL, entonces el estado está ABIERTO o ENTREGADO - Si la fuente está en línea, entonces el estado está ABIERTO o ENTREGADO o ENVIADO

Mi intento de no trabajar:

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