Menús dependientes <select> en HTML y JavaScript

tengo dos<select> campos en mi página. El primero se muestra a continuación con algunas marcas ilustrativas:

    <select name="1">
            <option value="Apple">Apple</option>
            <option value="Samsung">Samsung</option>
            <option value="other">Other</option>
    </select>

Si el usuario selecciona "Apple" en este primer campo, me gustaría que el segundo contenga los productos de Apple para que el usuario pueda elegir, como

    <select name="Apple">
            <option value="iphone">iPhone 7</option>
            <option value="ipad">iPad Super Pro</option>
            <option value="other">Other</option>
    </select>

Sin embargo, si elige "Samsung", me gustaría actualizar las opciones del segundo campo en consecuencia.

    <select name="Samsung">
            <option value="note">Note 6</option>
            <option value="galaxy">Galaxy S8</option>
            <option value="other">Other</option>
    </select>

Y si el usuario elige "Otro", quiero que se muestre un campo de entrada.

    <input type="text" name="other"/>

¿Cómo puedo hacer eso?

Respuestas a la pregunta(1)

Su respuesta a la pregunta