从选择标记中的 onchange 调用 JavaScript 和 JQuery 时不起作用答案

【问题标题】：JavaScript and JQuery do not work when called from onchange in a select tag从选择标记中的 onchange 调用 JavaScript 和 JQuery 时不起作用
【发布时间】：2025-11-28 07:55:02
【问题描述】：

我是 jquery 和 javascript 的新手，我已经搜索过这个答案，但找不到。

我的选择标签：

<select id="selectarea" name="sometext" size="10" width="250" style="width: 250px" onchange="openDisciplina(this)">
<?php
    foreach ($areas as $name) {
        echo "<option value='" . htmlentities($name[0]) . "'>" . htmlentities($name[0]) . "</option>";
    }
?>
</select><br>

还有我的js函数：

<script>
function openDisciplina(element)
{
    jQuery.ajax({
        type: "POST",
        url: "http://arenautfpr.com/professor/stage/disciplina/disciplina.php",
        data: {dados:element.value},
        success: function(data){
            $('#novidades2').html(data);
        }
    });
}
</script>

当我调用这个函数时，它根本不起作用，什么也没有发生。即使我在函数中只放了一个警报它也不会起作用，所以我认为这不是 ajax 部分的问题。

在错误控制台上，当我选择一个选项时出现此错误：

ReferenceError：找不到变量：openDisciplina

---- 已解决

我发现问题在于代码不在<head> 标签上，所以它不起作用。

【问题讨论】：

是否有 id 为 'novidades2' 的元素？您是否检查过请求格式正确（fiddler2 在这里可能会有所帮助）？
你有什么错误吗？你的意思是你的openDisciplina 不起作用还是 AJAX 位？
这个功能对我来说很好用。jsfiddle.net/Ss9sR
@collapsar，有一个具有该 ID 的 div，我在 Mac 上，所以 fiddler 不兼容。我怎样才能检查没有提琴手？
我用控制台收到的错误编辑了帖子

标签： javascript jquery html ajax html-select

【解决方案1】：

我会从 select 元素中删除 javascript 并使用此脚本：

$(document).ready( function() {
    $("body").on( "change", "#selectarea", function() {
        alert("changed");
        //test with alert before putting your code in here
        //jQuery.ajax({
            //type: "POST",
            //url: "relative/path/to/disciplina.php",
            //data: {dados:this.value},
            //success: function(data){
                //$('#novidades2').html(data);
            //}
        //});
    });
});

请注意：

在 ajax 调用中，我将 dados 更改为 this.value 而不是 element.value。
使用相对路径而不是 disciplina.php 的绝对路径
事件需要委托，因为 #selectarea 是在加载 dom 后动态生成的。我使用了来自body 的委托，但从#selectarea 的更接近的父元素委托可能更有效。

【讨论】：

什么也没发生。这个 .php 文件已经使用 AJAX 插入到页面中，这有什么区别，尝试从 ajax 加载的文档中调用函数？
@JoãoMiranda，啊...尝试使用委托：将 $("#selectarea").change( function() { ... 更改为 $("body").on("change","#selectarea", function() { ...
好的，警报现在有效，但是当我将 ajax 代码放入其中时，它什么也没做
它什么也没做，我检查了safari开发控制台的资源部分，它正在调用我请求的页面，但它作为一个空页面返回并标记为红色（我不知道它是什么意味着）。
@JoãoMiranda，所以成功回调甚至没有发生......我在想可能只是没有获取任何数据，这就是为什么你没有看到任何东西被放入 novidades2。您的 ajax 调用似乎没有成功。

【解决方案2】：

检查控制台中的错误。它没有调用，因为有一些错误阻止调用这个函数。

尝试 onchange 事件处理程序。这是小提琴link

<select id="selectarea" name="sometext" size="10" >
    <option val=1>One</option>
    <option val=2>Two</option>
    <option val=3>Three</option>
    <option val=4>Four</option>
</select>
<script>
var s=document.getElementById('selectarea');
s.onchange=function(e){
    console.log(e.target.value)
}
<script>

如果您只想使用以前的代码，请尝试将脚本块放在页面头部。

【讨论】：

我用控制台收到的错误编辑了帖子