问题描述
我在使用以下代码时收到一条 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 $sl_name_option");
if (($sf_name_option == $sf_name) && ($sl_name_option == $sl_name)) echo (" selected");
echo(">$sf_name_option $sl_name_option</option>");
}
echo("</select></td>");
是的,我知道上述显示菜单的方法不是最好的,我正在努力获得我需要的功能,然后可以通过分离 HTML 和 PHP 等使其更好
解决方法
你试图做同样的事情两次。
您可以使用 onchange=function()
调用内联函数,也可以使用 JQuery
添加 $(elem).on('change',function() {})
事件侦听器。
您的代码实际上正在运行(使用 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>
jQuery("#name").change("#name")
function SelectChanged() {
alert(this.value);
}