Dependent <select> menus in HTML and JavaScript

Question

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?

Answer 1

You would need cascading select fields to achieve the desired behavior. This can not be done purely in HTML, and you would need some programming logic in JavaScript to do it as you wish.

The topic is explained in details in the following links:

• How to populate a cascading Dropdown with JQuery
• populate second dropdown based on selected value of first dropdown
• How to populate second dropdown in $.ajax() depending on value of first dropdown?
• Populate second select-dropdown based on choice of first select-dropdown and populate the external content below the radiobuttons
• How does one make a cascading drop-down list in HTML with JavaScript?
• Javascript Cascading Drop Down Menu With 4 Hierarchical Boxes

Note: I didn't flag this question as a duplicate because you didn't explicitly mention JavaScript in the question.