下拉列表，jquery 选择抛出“”未定义错误

Question

我在使用以下代码时收到 SelectChanged is not defined 消息。对于我的生活，我无法理解为什么因为我以前使用过它：

jQuery

jQuery("#name").on("change", function() {
   alert(this.value); 
});

下拉列表

echo('<td class="table-font"><select id="name" onchange="SelectChanged(this)">');
foreach($Staff_On_Duty as $person){         
    $sf_name_option=$person->Staff_First_Name;
    $sl_name_option=$person->Staff_Last_Name;
    echo("<option value = $sf_name_option&nbsp;$sl_name_option");
    if (($sf_name_option == $sf_name) && ($sl_name_option == $sl_name)) echo (" selected");
    echo(">$sf_name_option&nbsp;$sl_name_option</option>"); 
}
echo("</select></td>");

是的，我知道上面显示菜单的方法不是最好的，我正在努力获得我需要的功能，然后可以通过分离 HTML 和 [=27 来改善它=]等

Answer 1

您正在尝试做同样的事情两次。

您可以使用 onchange=function() 调用内联函数，也可以使用 $(elem).on('change', function() {}) 添加 JQuery 事件侦听器。

您的代码实际上可以正常工作（使用 jquery 事件侦听器），但您在尝试运行内联函数时也会遇到错误。内联函数未定义（即，当 select 更改时，它会尝试查找名为 SelectChanged 的函数，但由于尚未定义，您会收到错误消息）。

下面的示例显示了这两种方法的功能。

// Add a jquery event listener to the element with the id name, listening for any change
jQuery("#name").on("change", function() {

  // Print the value of the element
  console.log("From JQuery function: " + this.value);

});


// Function that can be called inline using onchange = "SelectChanged(this)"
function SelectChanged(el) {

  // Print the value of the inline element
  console.log("SelectChanged function: " + el.value);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<td class="table-font">
  <select id="name" onchange="SelectChanged(this)">

    <option value="Firstname Surname 1" selected>Firstname Surname 1</option>
    <option value="Firstname Surname 2">Firstname Surname 2</option>
    
  </select>
</td>

Answer 2

jQuery("#name").change("#name")

function SelectChanged() {
     alert(this.value); 
}

下拉列表，jquery 选择抛出“”未定义错误

Dropdown list, jquery selection throwing "" not defined error

php

jquery

onchange

dropdown