依赖< select> HTML和JavaScript中的菜单 [英] Dependent <select> menus in HTML and JavaScript

问题描述

我的页面中有两个< select> 字段。第一张图显示了一些品牌名称：

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>

如果用户在第一个字段中选择Apple，我希望第二个包含Apple产品供用户选择，如

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>

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

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>

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

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

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

我该怎么做？

How can I do that?

推荐答案

您需要级联选择字段来实现所需的行为。这不能纯粹用HTML完成，你需要一些JavaScript编程逻辑来实现它。

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:

• 如何用JQuery填充级联下拉菜单


• 根据第一个下拉菜单的选定值填充第二个下拉菜单 =https://stackoverflow.com/questions/8768299/how-to-populate-second-dropdown-in-ajax-depending-on-value-of-first-dropdown?rq=1>如何填充第二个下拉列表在$ .ajax（）取决于第一个下拉列表的值？


• 填充第二个sele ct-dropdown根据第一个选择下拉列表的选择并在外部内容的下面填入单选按钮


• Javascript Cascading Drop Down Menu with 4 Hierarchical Boxes

• 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。

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

这篇关于依赖< select> HTML和JavaScript中的菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！