Зависимые <select> меню в HTML и JavaScript

У меня два<select> поля на моей странице. Первый показан ниже с некоторыми иллюстративными названиями брендов:

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

Если пользователь выбирает «Apple» в этом первом поле, я хотел бы, чтобы второе содержало продукты Apple для выбора пользователя, такие как

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

Однако, если он выберет «Samsung», я бы хотел соответственно обновить параметры второго поля.

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

И если пользователь выбирает «Другое», я хочу, чтобы отображалось поле ввода.

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

Как я могу это сделать?

Ответы на вопрос(1)

Ваш ответ на вопрос