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>

如果它选择 "Samsung"，但是，我想相应地更新第二个字段的选项。

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

如果用户选择 "Other"，我希望显示一个输入字段。

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

我该怎么做？

Answer 1

您需要级联select 字段 才能实现所需的行为。这不能纯粹在 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
如何在 HTML 中使用 JavaScript 制作级联下拉列表？
Javascript Cascading Drop Down Menu With 4 Hierarchical Boxes

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

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

Dependent <select> menus in HTML and JavaScript

html

javascript

select

option