Abhängige <select> -Menüs in HTML und JavaScript

Ich habe zwei<select> Felder auf meiner Seite. Das erste ist unten mit einigen illustrativen Markennamen gezeigt:

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

Wenn der Benutzer in diesem ersten Feld "Apple" auswählt, möchte ich, dass das zweite Feld Apple-Produkte enthält, aus denen der Benutzer auswählen kann, z. B.

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

Wenn "Samsung" ausgewählt ist, möchte ich die Optionen des zweiten Felds entsprechend aktualisieren.

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

Und wenn der Benutzer "Andere" wählt, soll ein Eingabefeld angezeigt werden.

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

Wie kann ich das machen

Antworten auf die Frage(2)

Ihre Antwort auf die Frage