- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
如何创建第二个下拉选项取决于第一个下拉选项的选择的表单?问题是我有 4 个下拉菜单,每个下拉菜单都取决于前一个。
例如:
下拉列表 #1 选项:英国/西类牙/意大利
下拉 #2 选项:(如果选择英格兰) super 联赛/锦标赛/联赛一
(如果选择了意大利)意甲/意乙
下拉列表 #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');
}
});
最佳答案
如何以升序方式将每个选择与数值分组并按值过滤作为引用?
每个选择都可以使用 data-group="N"
按顺序分组。这可以通过 data-target="N"
来定位,其中 target 是您希望接下来显示的组号。当每个列表更改状态时,目标组由目标组过滤,此外由当前列表的值引用的 data-ref
过滤。因此,显示相应的列表。
这是一个例子,只是我出于善意填充了一线部门和俱乐部。但是你明白了要点......
var groups = $("select[data-group]");
$("select[data-target]").on("change", function () {
var selectedRef = $(this).val();
if (!selectedRef) {
groups.hide();
return;
}
var targetGroup = Number($(this).data('target'));
if (targetGroup) {
groups.filter(function() {
var group = Number($(this).data('group'));
return (group === targetGroup || group > targetGroup);
}).hide();
groups.filter(`[data-ref="${selectedRef}"]`).show();
}
});
[data-group="1"],
[data-group="2"] {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select data-target="1">
<option value="">-- Select --</option>
<option value="England">England</option>
<option value="Spain">Spain</option>
<option value="Italy">Italy</option>
</select>
<!-- Tiers by country -->
<select data-group="1" data-target="2" data-ref="England">
<option value="">-- Select --</option>
<option value="PremierLeague">Premier League</option>
<option value="Championship">Championship</option>
<option value="LeagueOne">League One</option>
<option value="LeagueTwo">League One</option>
</select>
<select data-group="1" data-target="2" data-ref="Spain">
<option value="">-- Select --</option>
<option value="LaLiga">La Liga</option>
<option value="SegundaDivision">Segunda División</option>
<option value="SegundaDivision B">Segunda División B</option>
<option value="TerceraDivision">Tercera División</option>
</select>
<select data-group="1" data-target="2" data-ref="Italy">
<option value="">-- Select --</option>
<option value="SerieA">Serie A</option>
<option value="SerieB">Serie B</option>
<option value="SerieC">Serie C</option>
</select>
<!-- Teams by tier -->
<select data-group="2" data-ref="PremierLeague">
<option value="">-- Select --</option>
<option>Arsenal</option>
<option>Aston Villa</option>
<option>Barnsley</option>
<option>...</option>
</select>
<select data-group="2" data-ref="LaLiga">
<option value="">-- Select --</option>
<option>Alavés</option>
<option>Athletic Bilbao</option>
<option>Atlético Madrid</option>
<option>...</option>
</select>
<select data-group="2" data-ref="SerieA">
<option value="">-- Select --</option>
<option>Atalanta</option>
<option>Bologna</option>
<option>Brescia</option>
<option>...</option>
</select>
关于javascript - 当第二个下拉菜单取决于第一个下拉菜单选择时如何创建表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57299417/
我试图找到在庞大的代码库中创建 NaN 的位置。是否有一些编译器标志或我可以用来在 NaN 上 panic 的东西,这样我就可以找到它在哪一行? 最佳答案 没有编译器标志。你能做的最好的事情就是把你的
A类 class ClassA { @Autowired class ClassB; } 类配置: @Configuration class TestConfi
我是一名统计学研究生,经常使用 R。我熟悉其他编程环境中的 OOP。我什至在各种定义用于存储数据的新类的统计包中看到了它的使用。 在我研究生生涯的这个阶段,我通常会为一些类作业编写一些算法——一些接收
我想要两个不同的网络摄像头视频输出,一个是普通的网络摄像头镜头,另一个是它的“镜像”版本。 cv2可以吗? import time, cv2 video=cv2.VideoCapture(0) a=0
我创建了一个可以通过两种方式过滤的图库。一个通过单击按钮,另一个通过搜索过滤器。过滤器工作完美,除了当 div 隐藏在过滤器上时,其余显示的 div 不会彼此相邻 float 。 这是过滤前的样子:
我们作为一个 4 人团队工作,我们的项目部署在 openshift我们使用 git 存储库 进行提交、推送和 pull 。当有人提交更多更改时,其他人必须 pull 它以在我们的系统中进行更新。但是从
我正在尝试扩展自动完成功能,以便在选择某个项目时显示辅助标签。例如,给定显示项目的自动完成功能,项目名称将显示在包含代码的输入框旁边的 span 标记中。 查看自动完成源代码,我发现过滤值的下拉列表是
我有一个包含歌曲、艺术家和专辑实体的核心数据。 歌曲有可选的一对一关系艺术家到艺术家实体和专辑到专辑实体这两个实体都与 Song 实体具有反向关系。 相册有可选的一对一关系艺术家到艺术家实体和可选的一
XmlSerializer正在调用 IList.Add()在我的课上,我不明白为什么。 我有一个自定义类(层次结构中的几个类之一),其中包含我使用 XmlSerializer 与 XML 相互转换的数
我们在 Web 应用程序中定义了此事件,它创建了一个名为 timelineEventClicked 的自定义触发器 canvas.addEventListener('click', function
有大量资源可用于使用 Swift(可达性)检查有效的 Internet 连接,以及在进行 API 调用时检查 httpResponse 的 statusCode 的方法,但是检查和处理这些的“正确”方
谁能告诉我是否可以在 Controller 规范中 stub params[] 值,以便 Controller 接受 stub 值作为 View 中的实际 params[] 值。 例如,我的观点有一个
我的问题是没有在 UserControl 中连接 DependencyProperties。这不是问题。当我将 UserControl 中的按钮绑定(bind)到 UserControl 的 Depe
如何#define 路径 L"C:\Windows\System32\taskmgr.exe"来处理宽字符 #define TASK_MGR "C:\\Windows\\System32\\taskm
我正在尝试使用 Jasmine 和 Sion 编写单元测试,但是在使用 RequireJs 加载模块时我很难找到以下等效项: sinon.stub(window, "MyItemView"); 使用
我有一个包含三个 div 的示例页面,如下所示: 当浏览器大小达到 md 点并且第二个 div 高于第一个 div 时,第三个 div 开始在第一个的右侧
我在 C++ 端有 CString cs,在 C# 端有 IntPtr ip,它通过编码(marshal)处理机制包含 cs 的值。 然后,我只需将需要的字符串作为 Marshal.PtrToStri
我是一名优秀的程序员,十分优秀!