Menus <select> dependentes em HTML e JavaScript

Eu tenho dois<select> campos na minha página. O primeiro é mostrado abaixo com alguns nomes de marca ilustrativos:

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

Se o usuário selecionar "Apple" neste primeiro campo, gostaria que o segundo contivesse os produtos da Apple para o usuário escolher, como

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

Se escolher "Samsung", no entanto, gostaria de atualizar as opções do segundo campo de acordo.

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

E se o usuário escolher "Outro", quero que um campo de entrada seja exibido.

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

Como eu posso fazer isso?

questionAnswers(1)

yourAnswerToTheQuestion