下拉列表，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 和 PHP 等使其更好

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); 
}