依赖<选择>HTML 和 JavaScript 中的菜单 [英] Dependent <select> menus in HTML and JavaScript
问题描述
我的页面中有两个 字段.第一个如下所示，其中包含一些说明性的品牌名称:
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>
但是，如果它选择三星"，我想相应地更新第二个字段的选项.
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"/>
我该怎么做?
推荐答案
您需要级联选择字段来实现所需的行为.这不能完全在 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 填充级联下拉列表
- 填充第二个下拉列表基于第一个下拉列表的选定值
- 如何根据第一个下拉列表的值在 $.ajax() 中填充第二个下拉列表?
- 根据第一个下拉列表的选择填充第二个下拉列表，并填充单选按钮下方的外部内容
- 如何使用 JavaScript 在 HTML 中制作级联下拉列表?
- Javascript带有 4 个分层框的级联下拉菜单
注意:我没有将此问题标记为重复，因为您没有在问题中明确提及 JavaScript.
Note: I didn't flag this question as a duplicate because you didn't explicitly mention JavaScript in the question.
这篇关于依赖<选择>HTML 和 JavaScript 中的菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
