出现为“未定义”的数据列表数组的.index

时间:2018-07-03 15:42:29

标签: javascript jquery html arrays

我正在尝试使用从javascript中的数组填充的数据列表,告诉我单击了数组的哪一部分。

我用一些代码进行了一些故障排除,结果发现我的阵列都报告未定义或为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 个答案:

答案 0 :(得分:1)

在访问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 doc:https://www.w3schools.com/jsref/jsref_indexof_array.asp

答案 1 :(得分:1)

我已经更新了您的代码。您应该从courseNames中检查值。 我希望这是您所期望的。

import time

def test(x):
    t1 = time.clock()
    #>5s
    #from functools import reduce
    #a = reduce(lambda a, i: a + i, (1 for i in range(x)), 0)
    a = 0
    for i in range(x):
        #4.38s
        #a += 1
        #1.89s
        pass
    t2 = time.clock()
    print("Time for {} was {}".format(x, t2 - t1))
    return x

print(test(int(1e8)))
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()));
      });
      }