JavaScript和JQuery在select标签中的onchange调用时不起作用

JavaScript and JQuery do not work when called from onchange in a select tag

本文关键字：onchange 调用 不起作用 标签 JQuery select JavaScript      更新时间：2023-09-26

我是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: Can't find variable: openDisciplina

——解决

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

我将从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。
  • 使用相对路径代替绝对路径。php
    • 由于#selectarea是在dom加载后动态生成的，因此需要对事件进行
  • 委托。我使用了body的委托，但是从#selectarea更接近的父元素委托可能更有效。

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

尝试onchange事件处理程序。这里是小提琴链接

<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>

如果你只想使用以前的代码，那么试着把脚本块放在页首

相关文章：