【发布时间】：2019-07-31 22:05:33
【问题描述】：
如何创建第二个下拉列表中的选项取决于第一个下拉列表中选项的选择的表单？问题是我有 4 个下拉菜单，每个下拉菜单都依赖于前一个。
例如：
下拉 #1 选项： 英国 / 西班牙 / 意大利
下拉 #2 选项： （如果选择了英格兰） 超级联赛 / 冠军 / 第一联赛
（如果选择意大利） 意甲 / 乙级
下拉 #3 选项： （如果选择了英超联赛） 切尔西 / 曼城 /埃弗顿
....（希望你明白）
我尝试使用另一个问题中的此代码，但找不到包含第三个甚至第四个下拉选项的解决方案。
<select id="groups">
<option value='England'>England</option>
<option value='Spain'>Spain</option>
<option value='Italy'>Italy</option>
<select id="sub_groups">
<option data-group='SHOW' value='0'>-- Select --</option>
<option data-group='England' value='Premier'>Premier</option>
<option data-group='England' value='Championship'>Championship</option>
<option data-group='England' value='League One'>League One</option>
<option data-group='Spain' value='La Liga'>La Liga</option>
<option data-group='Spain' value='Second Division'>Second Division</option>
<option data-group='Spain' value='Third Division'>Third Division</option>
<option data-group='Italy' value='Seria A'>Seria A</option>
<option data-group='Italy' value='Seria B'>Seria B</option>
<select id="sub_sub_groups">
<option data-group='SHOW' value='0'>-- Select --</option>
<option data-group='Premier' value='Premier'>Chelsea</option>
<option data-group='La Liga' value='La Liga'>Sevilla</option>
<option data-group='Seria A' value='Seria A'>Juventus</option>
<select>
$(function(){
$('#groups').on('change', function(){
var val = $(this).val();
var sub = $('#sub_groups');
$('option', sub).filter(function(){
if (
$(this).attr('data-group') === val
|| $(this).attr('data-group') === 'SHOW'
) {
if ($(this).parent('span').length) {
$(this).unwrap();
}
} else {
if (!$(this).parent('span').length) {
$(this).wrap( "<span>" ).parent().hide();
}
};
});
});
$('#groups').trigger('change'); {
$('#sub_groups').on('change', function(){
var subsub = $('#sub_sub_groups');
$('option', subsub).filter(function(){
if (
$(this).attr('data-group') === val
|| $(this).attr('data-group') === 'SHOW'
) {
if ($(this).parent('span').length) {
$(this).unwrap();
}
} else {
if (!$(this).parent('span').length) {
$(this).wrap( "<span>" ).parent().hide();
}
}
});
});
$('#sub_groups').trigger('change');
}
});
【问题讨论】：
-
这里没有表格。请提供每个选择元素的完整示例。有多种方法可以做到这一点，您尝试过什么？
-
有多种方法可以做到这一点，您尝试过什么？请注意，这似乎需要大量的选择值，您首先要定义所有这些值，以某种方式通过数据将它们链接在一起 - 基本上是您开始描述的内容，但对于所有这些值；这可能在一个 JavaScript 对象中，一组固定的隐藏 SELECT 元素，诸如此类的东西
-
@MarkSchultheiss 我已经编辑了问题并粘贴了我正在使用的确切代码。
-
我想我知道你的目标是什么，而且离你不远了。
标签： javascript jquery forms dropdown