document.getElementById有效，但$抛出了一个错误

document.getElementById works, but $ is throwing an error

本文关键字：错误 一个 有效 getElementById document      更新时间：2023-09-26

我在这里有这个代码：

<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不起作用？

由于您使用的是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...

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

这将创建一个javascript对象。

var e1 = $("#user");

这将创建一个jquery对象。您不能对此使用javascript属性。您必须使用jquery属性。

您在文章顶部提供的选择菜单的id为"test"，而不是"user"。我假设您实际使用的代码的id为"user"。e1是一个jQuery对象，因此要访问它的值，请使用e1.val（）而不是e1.options[e1.selectedIndex].text。您将javascript代码与jQuery代码混合使用。

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

这应该效果更好：

$（"#user"）.change（function（）{console.log（e1.val（））；}）；

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

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

相关文章：