依赖<选择>HTML和JavaScript菜单

Dependent <select> menus in HTML and JavaScript

本文关键字：JavaScript 菜单 HTML 选择 lt 依赖 gt      更新时间：2023-09-26

我的页面中有两个<select>字段。第一个品牌名称如下：

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

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

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

我该怎么做？

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

该主题在以下链接中进行了详细解释：

  • 如何使用JQuery填充级联下拉列表
  • 基于第一个下拉列表的选定值填充第二个下拉列表
  • 如何根据第一个下拉列表的值在$.ajax（）中填充第二个下拉列表
  • 根据第一选择下拉列表的选择填充第二选择下拉列表，并填充单选按钮下方的外部内容
  • 如何用JavaScript在HTML中创建级联下拉列表？
  • 带有4个层次框的Javascript级联下拉菜单

注意： 我没有将这个问题标记为重复，因为你在问题中没有明确提到JavaScript

相关文章：