[英]Select an option from a datalist and compare index number to another option in a second datalist
抱歉,标题令人困惑。 我所拥有的是两个彼此相邻的表列,每个列中都有一个datalist。 一个是学校提供的课程名称列表,另一个是课程的相应目录编号。
我想发生的是,学生可以选择课程标题,它将自动在下一列中显示目录编号,或者他们可以选择目录编号,并且将在前一列中显示课程标题。
我目前如何设置此数据是2个单独的数组,如下所示:
<td>
<input list="courses" name="course" placeholder="Course" onchange="indexTest()">
<datalist id="courses">
<!--Filled in script-->
</datalist>
</td>
<td>
<input list="catalogs" name="catalog" placeholder="Catalog Number">
<datalist id="catalogs">
<!--Filled in script-->
</datalist>
</td>
<script>
var course = ["class 1","class 2","class 3","class 4","class 5"];
var list = document.getElementById('courses');
courseNames.forEach(function(item){
var option = document.createElement('option');
option.value = item;
list.appendChild(option);
});
</script>
<script>
var catalog = ["catalog 1", "catalog 2","catalog 3","catalog 4","catalog 5"];
var list = document.getElementById('catalogs');
catNumbers.forEach(function(item){
var option = document.createElement('option');
option.value = item;
list.appendChild(option);
});
</script>
我以为我可以运行一个脚本,该脚本在一个数组中查找所选选项的索引号,然后从另一个数组中提取相同的索引号,但是我似乎无法正常工作。
如果两个数组在相同的衰变中都具有对应的值,则可以在每个下拉列表的onchange事件中执行此操作:
Safari或IE版本<= 9不支持旁注数据列表,可能想更改为选择元素:
<select id="courses" onchange="UpdateFromCourses()">
</select>
//Just make another function like this doing
//the same thing but to the other drop down
function UpdateFromCourses(){
const selIndex = document.getElementById('courses').selectedIndex;
document.getElementById('catalogs').selectedIndex = selIndex;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.