Question

我这里有这个代码：

<select id="test">
        <option value="1">test1</option>
        <option value="2" selected="selected">test2</option>
        <option value="3">test3</option>
</select>

在我的脚本中，我有两行代码，一行是JavaScript，另一行是jquery，如下所示：

var e = document.getElementById("user");
var e1 = $("#user");

我甚至在我的控制台中打印出这样的内容：

 console.log(e)
 console.log(e1)

他们正在印刷相同的东西。但是当我写这样的on更改事件代码时：

$("#user").change(function() {
        console.log(e.options[e.selectedIndex].text)
 });

这正是我从下拉菜单中选择的内容。这种从dom获取的javascript方式正在运行。 e1同样如此：

$("#user").change(function() {
    console.log(e1.options[e1.selectedIndex].text)
 });

正在抛出错误：

Uncaught TypeError: Cannot read property 'undefined' of undefined (anonymous function)create:167 f.event.dispatchjquery-1.7.1.min.js:3 f.event.add.i.h.handle.i

（从chrome的开发者工具中看到）

怎么回事？我是Javascript和jquery的新手！为什么在我的情况下jquery不起作用？

Answer 1

由于您正在使用jquery而e1是一个jquery对象，请尝试：

console.log(e1.find('option:selected').text())

要抓住实际元素，您可以使用get()：

var select = $('#select').get(0) // Grab original DOM element
select.options // It'll work now...

Answer 2

var e = document.getElementById("user");

这会创建一个javascript对象。

var e1 = $("#user");

这会创建一个jquery对象。你不能在这上面使用javascript属性。您必须使用jquery属性。

Answer 3

console.log(e1[0].options[e1[0].selectedIndex].text)

Answer 4

您在文章顶部提供的选择菜单的ID为＆＃39; test＆＃39;不是用户＆＃39;。我认为您实际使用的代码的ID为“用户”。 e1是一个jQuery对象，因此访问它的值使用e1.val（）而不是e1.options [e1.selectedIndex] .text。您将javascript代码与jQuery代码混合在一起。

Answer 5

e1是一个jQuery对象，因为您使用jQuery来选择它。它不是正常的js dom元素，这就是你尝试使用它的方式。

这应该更好：

$（“＃user”）。change（function（）{ 的console.log（e1.val（））; }）;

val（）是一个jQuery函数，它提供了表单元素值的统一包装，因此您不需要查找所选索引，从select obj中访问它等等。这是jQuery所做的事情之一生活更轻松。

document.getElementById有效，但是$抛出错误

5 个答案: