HTML 和 JavaScript 中的相关 <select> 菜单

Question

我的页面中有两个 <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>

但是，如果它选择“三星”，我想相应地更新第二个字段的选项。

    <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"/>

我该怎么做？

Answer 1

您需要级联选择字段来实现所需的行为。这不能仅在 HTML 中完成，您需要一些 JavaScript 中的编程逻辑才能按照您的意愿完成。

该主题在以下链接中进行了详细说明：

• 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

注意：我没有将此问题标记为重复问题，因为您没有在问题中明确提及 JavaScript。