作为“未定义”的Datalist数组的.index
作为“未定义”的Datalist数组的.index
提问于 2018-07-03 15:42:28
我正在尝试使用javascript中的数组填充datalist，告诉我单击了数组的哪一部分。
我对我的代码做了一些故障排除，结果我的数组都报告了未定义或0。
我已经开始使用jQuery，因为它更干净，更容易理解，所以下面是我当前的公式，如果我从数组中选择了什么，就可以向我发送警报：
以下是html：
<input list="courses" name="courseInput" placeholder="Course" oninput="Update()">
<datalist id="courses" name="courseDatalist">
<!--Filled in script-->
</datalist>以下是js/jQuery：
//Defines Course Names as an array and sets to the datalist
var courseNames = ["Survey Design and Data Analysis","Masters thesis Research","Enhancing Teaching Skills","Evaluation and Assessment","Strategies for Dealing with the Problem Learner","Medical Writing and Presentation Skills (Online)","Topics in Medical Education and Medical Education Research","Making the Most of Mentoring","Teaching Practicum: Outpatient Teaching","Teaching Practicum: Inpatient Teaching","Teaching Practicum: Classroom Teaching","Teaching Communication Skills","Seminar Series in Medical Education","Introduction to Systematic Reviews and Meta-Analyses"];
var list = $('#courses')[0];
//Creates an option element for each item in the array
courseNames.forEach(function(item){
var option = document.createElement('option');
option.value = item;
list.appendChild(option);
});
//Once an option is selected, tell which index number was selected
function Update() {
$("input[name=courseInput]").change(function(){
alert($(this).index());
});
}现在，如果我将最后一节从.index更改为.val，它将告诉我所选选项的正确值。
知道为什么它不会访问数组索引号吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-07-03 15:59:32
在访问this的Update函数时，您访问的是在forEach循环中创建的输入，而不是数组。如果您想从上面的数组中获取数组索引，您必须这样做。
function Update() {
$("input[name=courseInput]").change(function(){
// courseNames is the array you defined
// $(this).val() returns a string in that array
// indexOf looks for that string in the array
courseNames.indexOf($(this).val());
});
}indexOf文档：array.asp
Stack Overflow用户
发布于 2018-07-03 16:05:08
我更新了你的密码。您应该检查来自courseNames的值。我希望这是你所期望的。
var courseNames = ["Survey Design and Data Analysis","Masters thesis Research","Enhancing Teaching Skills","Evaluation and Assessment","Strategies for Dealing with the Problem Learner","Medical Writing and Presentation Skills (Online)","Topics in Medical Education and Medical Education Research","Making the Most of Mentoring","Teaching Practicum: Outpatient Teaching","Teaching Practicum: Inpatient Teaching","Teaching Practicum: Classroom Teaching","Teaching Communication Skills","Seminar Series in Medical Education","Introduction to Systematic Reviews and Meta-Analyses"];
var list = $('#courses')[0];
//Creates an option element for each item in the array
courseNames.forEach(function(item){
var option = document.createElement('option');
option.value = item;
list.appendChild(option);
});
//Once an option is selected, tell which index number was selected
function Update() {
$("input[name=courseInput]").change(function(){
alert(courseNames.indexOf($(this).val()));
});
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input list="courses" name="courseInput" placeholder="Course" oninput="Update()">
<datalist id="courses" name="courseDatalist">
<!--Filled in script-->
</datalist>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51158492
复制相关文章
相似问题
腾讯云开发者
