个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
在底部编辑注释。
我想要做的是创建一个脚本，允许我在 select 元素中查看选定的选项，并将该选择用作第二个 select< 中的选项的限制器 元素可以使用。
虽然该示例非常简单地说明了我正在谈论的内容，但实际上我将使用代码来限制更大选项列表的选项。在较大的代码中，我想获取 option_1_1 来限制从 selectElement2 到 options_2_1 到 options_2_9 的选项，option_1_2 将选择限制为 option_2_1 到 option_2_11，option_1_3 将选择限制为 option_2_1 到 option_2_5。
举个例子；
<!DOCTYPE html>
<html>
<head>
<!-- I prefer not to use PHP, but if that's the ONLY way to do it, say so. -->
<script>
/* Need script to perform */
</script>
</head>
<body>
<!-- Select element 1 -->
<select id="selectElement1">
<!-- If option_1_0 is selected, no options are available in selectElement2 -->
<option id="option_1_0" value="" selected></option>
<!-- If option_1_1 is selected, only select options are available in selectElement2 -->
<option id="option_1_1" value="1" >1</option>
<!-- If option_1_2 is selected, only select options are available in selectElement2 -->
<option id="option_1_2" value="2" >2</option>
<!-- If option_1_3 is selected, only select options are available in selectElement2 -->
<option id="option_1_3" value="3" >3</option>
</select>
<!-- Select element 2 -->
<select id="selectElement2">
<!-- Selected by default and cannot change unless a choice is selected from selectElement1 -->
<option id="option_2_0" value="" selected></option>
<!-- If option_1_1 is selected, only option_2_1 is available -->
<option id="option_2_1" value="1">1</option>
<!-- If option_1_2 is selected, only option_2_1 and option_2_2 are available -->
<option id="option_2_2" value="2" >2</option>
<!-- If option_1_3 is selected, only option_2_3 is available -->
<option id="option_2_3" value="3" >3</option>
<!-- If option_1_3 is selected, only option_2_3 and option_2_4 are available -->
<option id="option_2_4" value="4" >4</option>
</select>
</body>
</html>
编辑谢谢你们。你们都帮了我大忙。这是最终的工作代码:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript">
var gradeValue = {};
gradeValue['A'] = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
gradeValue['B'] = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'];
gradeValue['C'] = ['1', '2', '3', '4', '5'];
function changeList() {
var gradeList = document.getElementById("grade");
var rankingList = document.getElementById("ranking");
var selGrade = gradeList.options[gradeList.selectedIndex].value;
while (rankingList.options.length) {
rankingList.remove(0);
}
var rank = gradeValue[selGrade];
if (rank) {
for (var i = 0; i < rank.length; i++) {
var ranks = new Option(rank[i], i);
rankingList.options.add(ranks);
}
}
}
</script>
</head>
<body>
<select id="grade" onchange="changeList()">
<option value="">-- Select --</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select id="ranking"></select>
</body>
</html>
最佳答案
你可以尝试这样的事情。
var selectOne = document.getElementById('selectElement1'),
selectTwo = document.getElementById('selectElement2'),
//set up options (key is equal to the value of the option in selectElement1)
optsList = {
1: ['option_2_1', 'option_2_2', 'option_2_3', 'option_2_4'],
2: ['option_2_5', 'option_2_6', 'option_2_7', 'option_2_8'],
3: ['option_2_9', 'option_2_10', 'option_2_11', 'option_2_12']
};
//add an event listener for the onchange event
selectOne.onchange = function (e) {
var selectedOpt = this[e.target.selectedIndex],
optListSet = optsList[selectedOpt.value] || 0;
//disable all options.
for(var i=0; i < selectTwo.length; i++){
selectTwo[i].disabled = "disabled";
}
//reset selected option
selectTwo.children[0].selected = "selected";
//loop through the options set corresponding to the value of the selected option
if(optListSet){
for (var i = 0; i < optListSet.length; i++) {
opt = document.getElementById(optListSet[i]);
opt.disabled = false;
}
}
//enable options list 2
selectTwo.disabled = false;
};
这是 jsfiddle
关于javascript - 如何创建一组依赖选择列表，其中连续列表取决于前面列表选项的选择？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28160901/
24
4
0
很高兴和你分享一些有关写python代码的经验，简直就像是品尝一口甜甜的草莓冰淇淋。每当我开始写python代码的时候，就仿佛是开启了一段奇妙的冒险，每一行代码都是我的剧情发展，每一个bug都是我的挑
我有一张看起来像这样的 table ， Date Value 01/01/2010 03:59:00 324.44 01/02/2010 09:31:00
我已尽我所能检查但未找到任何 kwds允许您在 y=a-x 上画一条线(例如 pandas )散点图(不一定是最佳拟合线)并将其带到后面(或前面)。 #the data frame ax=df.plo
我已尽我所能检查但未找到任何 kwds允许您在 y=a-x 上画一条线(例如 pandas )散点图(不一定是最佳拟合线)并将其带到后面(或前面)。 #the data frame ax=df.plo
我正在尝试在书签中使用 jquery UI 作为 slider 。并且 jquery ui 要求在普通 jquery 文件之后包含该文件。 所以到目前为止我所尝试的只是将脚本附加到 header ，同
我正在尝试将 div (.portrait_text) 添加到容器 (.gallery_container) 中: 每个图像都会添加到其相应的 .gallery_container 前面。但我也想将
因此，为了避免让自己头疼(反而制造头疼)，我试图将一个字符串数组成员放在同名的结构变量前面，但它不起作用并给我一个错误:std::string {aka class std::basic_string
嗨，我的索引页面上的下拉菜单有问题，下拉元素隐藏在我的图像 slider 下方，它位于我的导航栏正下方，我希望能够看到下拉菜单元素，任何帮助将不胜感激非常感谢； 这是我的导航栏 html:
我想在 div 前面移动一个按钮。 http://demo.gbaus.com/index.html在网站中，获取报价按钮不可点击，除非您点击最底部。我希望将它移到前面，以便您可以单击它。 posot
我有一个以时隙为键的 map ，指向分配的客户。并非所有时隙都有指定的客户，它可能既稀疏又密集，所以我坚持使用 map。执行。如果存在分配，则仅存在键。 计数器从槽 1 计数到槽 x，并在每个槽检查分
我有三个 Controller 。一个是 HomeViewController 启动 BlahPageViewController 并且它是单独的页面。其他两个 Controller (BlahPag
我有一个文本区域。我可以设置它的文本 $("#mytextarea").text("foo") 我可以像这样添加到文本区域: $("#mytextarea").prepend("foo") 但是我不能
我喜欢在绘图时生成我自己的网格线，这样我就可以控制刻度线等，我正在用“hist”绘图程序来解决这个问题。 hist(WindSpeed, breaks=c(0:31), freq=TRUE,
就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放，visit
当我用 Java 发送电子邮件时，如果单词“From”是任何行的第一个单词，则在该单词的开头附加一个“>”字符，我该如何阻止这种情况？ 这是我的文字: The following transactio
我有这一行输出 span 标记的名称值: $(this).text($(this).attr("name")); 在“名称”值之前添加字符(特别是美元符号 ($))的最佳方式是什么。 最佳答案 尝试:
在我调用 segue 返回到以前的 View Controller 之一后，我一直在努力解决我的选项卡栏被隐藏的问题。 我读到，在segue之后， View 覆盖了标签栏。有没有办法将标签栏放在 Vi
我的目标是有一个窗口，其中背景有 2 个不同颜色的面板。它们各自覆盖屏幕的特定百分比，并且会定期变化。我通过创建一个 JSplitPane 来做到这一点。但现在我想添加一个 JLabel 在屏幕中间的
我试图让我的导航栏在滚动时出现在正文的顶部。目前它在下面，如图所示。 我还有一个抽屉导航，它在引入 ScrollView 后就停止工作了……我觉得这可能是因为当我单击“汉堡包”图标时，它实际上位于 S
我之前问过类似的问题，但可能不清楚。 我有一个在 Amazon Elastic beanstalk 上运行的 Web 服务 (tomcat 8)，它运行良好。然后我在 DomainA.com 上运行网
我是一名优秀的程序员,十分优秀！