分享程序员开发的那些事...
更新时间：2023-12-02 23:32:16
我根本不使用jQuery，因此这可能不是正确的方法，也不是做到这一点的方法，但从本质上讲，您可以创建匿名函数或使用命名函数(但不是您尝试过的) 这种方法使用的是命名函数，但调用方式有所不同.
I don't use jQuery at all so this might not be either correct or the way to do it but in essence you can either create an anonymous function or use a named function ( but not as you had tried ) This approach uses a named function but called differently.
<script>
function showUser( event ) {
var el=event.target
var value=el.options[ el.options.selectedIndex ].value;
if ( value == "" ) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xhr=new XMLHttpRequest();
xhr.onreadystatechange = function() {
if ( this.readyState == 4 && this.status == 200 ) {
document.getElementById("txtHint").innerHTML = this.response;
}
};
xhr.open("GET","tableau.php?Nom="+value,true);
xhr.send();
}
}
jQuery(document).ready(function($) {
$('select.Nom').chosen({ width:"50%" }).change( showUser );
});
</script>
因为使用jQuery将事件侦听器绑定到SELECT菜单，所以不需要嵌入式事件处理程序.
Because you are binding an event listener to the SELECT menu using jQuery you don't need an inline event handler.
<select class='Nom' name='Nom' id='Nom'>
....其余代码
更新:上面的代码根本没有经过测试，但是下面的代码已经过测试，因此我确定您可以使用它.值得注意的一件事是，当我最初尝试使用代码$('select.Nom').chosen({ width:"50%" }).change时，它引发了错误，因此我从中删除了.chosen({ width:"50%" })，随后的内容似乎可以正常工作.
Update: the above code was not tested at all, the following however has been so I'm sure you can make use of it. One thing of note was when I tried initially with the code $('select.Nom').chosen({ width:"50%" }).change it threw errors so I removed the .chosen({ width:"50%" }) from that and what follows appears to work ok.
<?php
/*
this emulates the database calls you would make when calling tableau.php
*/
if( $_SERVER['REQUEST_METHOD']=='GET' ){
if( !empty( $_GET['Nom'] ) ){
exit( $_GET['Nom'] );
}
}
?>
<html>
<head>
<script src="//code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script>
function showUser( event ) {
var el=event.target
var value=el.options[ el.options.selectedIndex ].value;
if ( value == "" ) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xhr=new XMLHttpRequest();
xhr.onreadystatechange = function() {
if ( this.readyState == 4 && this.status == 200 ) {
document.getElementById("txtHint").innerHTML = this.response;
}
};
/* url has been edited for the demo */
xhr.open("GET","?Nom="+value,true);
xhr.send();
}
}
jQuery(document).ready(function($) {
$('select.Nom').change( showUser );
});
</script>
</head>
<body>
<form>
<select class='Nom' name='Nom' id='Nom'>
<option value='name_1'>Name 1
<option value='name_2'>Name 2
<option value='name_3'>Name 3
<option value='name_4'>Name 4
</select>
<div id="txtHint"><b>Person info will be listed here...</b></div>
</form>
</body>
</html>