I have two <select> fields in my page. The first is shown below with some illustrative brand names:

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

If the user selects "Apple" in this first field, I would like the second to contain Apple's products for the user to choose from, such as

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

If it chooses "Samsung", however, I would like to update the second field's options accordingly.

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

And if the user chooses "Other", I want an input field to be displayed.

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

How can I do that?