下拉列表，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事件侦听器(，但您在尝试运行内联函数时也会遇到错误。内联函数没有定义(即，当选择被更改时，它试图找到一个名为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); 
}