Question

我正在尝试遍历select的所有选项并获取具有相同id变量的选项。一个例子是更好的：

SELECT STRUCTURE：

<select id='operators'>
    <option value='0'>Harrison</option>
    <option value='1'>Julian</option>
</select>

CODE：

var operator_id = 1;
for (var i = 0; i < $('select#operators option').length; i++) {
    if ($('select#operators option')[i].val() == 1) {
        alert("Found!");
        //Here the code for select automatically in operator the option found
    }
}

JSFIDDLE

你怎么看我想要获得与我的变量值具有相同id的选项。之后，我想自动选择operators中的选择。因此，在这种情况下，将显示：Julian作为选定值。

但我明白了：

未捕获的TypeError：$（...）[i] .val不是函数

出了什么问题？

Answer 1

将代码包裹在$(function(){ ... });中，等待DOM Ready事件。

$('select#operators option')[i]不是jquery对象而是DOM元素，因此请改用.value

$(function () {

  var operator_id = 1;
  for (var i = 0; i < $('select#operators option').length; i++) {
    if ($('select#operators option')[i].value == 1) {
        alert("Found!");
        //Here the code for select automatically in operator the option found
    }
  }
});

Fiddle

要将其设置为所选选项，而不是alert使用

$('select#operators option')[i].selected = true;

Answer 2

在jQuery对象上使用括号表示法返回该索引处的DOMElement，而不是另一个jQuery对象，因此该对象上不存在value()方法。您需要使用eq()：

var operator_id = 1;
for(var i = 0; i < $('select#operators option').length; i++) {
    if ($('select#operators option').eq(i).val() == 1)  {
        alert("Found!");
        //Here the code for select automatically in operator the option found
    }
}

更好的是，你可以完全避免使用循环：

var $option = $('#operators option[value="' + operator_id + '"]')

从那里，您可以根据需要使用$option。

如果您想按照其值设置所选option，只需在父val()元素上调用select即可：

var operator_id = 1;
$('#operators').val(operator_id);

Answer 3

jQuery对象的[i]元素是本机DOM元素，本身不是jQuery对象，因此您无法在其上调用.val()。

试试这个 - 它会更有效率：

var opts = $('#operators option');
for (var i = 0, n = opts.length; i < n; ++i) {
    if (opts[i].value == operator_id) {
        // found!
    }
}

注意jQuery只被调用一次并且结果被缓存 - 其他所有内容都在该缓存对象上完成，使用适用的本机DOM属性。还需要使用节点类型限定#operators选择器 - 您的元素ID应该是唯一的。

所有这一切，如果你的意图只是让一个给定的选项成为选定的值，你根本不需要迭代选项 - 只需设置{{1}的.value属性直接：

select

如何遍历select的选项并获得对应的id？

3 个答案: