Question

当我尝试将onchange函数添加到js文件时，我遇到了问题Onchange我得到了它：https://www.w3schools.com/php/php_ajax_database.asp：

jQuery(document).ready(function($) { 
  $('select.Nom').chosen({ width:"50%" }).change(function showUser(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","tableau.php?Nom="+str,true);
        xmlhttp.send();
    }
});
});

tableau.php：

<?php


  $q = intval($_GET['Nom']);


  $query = "select Adresse, Nom from herboristes where Nom = '".$q."'";

  $result = mysqli_query($query);

$row = mysqli_fetch_array($result) {
echo $row['Adresse'];
  }
   }

   ?>

所以我需要的是显示Adresse信息，当我选择一个名字（Nom）从我的下拉列表中我用这段代码创建：

<select class='Nom' onchange="showUser()" name='Nom' id='Nom'>
<option value="">--- Select ---</option>

[insert_php]
$servername = "localhost";
$username = "root";
$password = "";
$conn = new mysqli($servername, $username, $password, "somapam_bd");

 $sql = mysqli_query($conn, "SELECT Nom FROM herboristes");

while($ligne_liste=mysqli_fetch_array($sql)) {
    echo '<option value="'.$ligne_liste['Nom'].'">'.$ligne_liste['Nom']."</option>\n";
}
echo '</select>';
[/insert_php]
<div id="txtHint"><b>Person info will be listed here...</b></div>

我在下拉列表中使用所选的插件wordpress ...它非常复杂的wordpress，我真的需要你的帮助。谢谢

Answer 1

我根本不使用jQuery，所以这可能不是正确的或者是这样做的，但实质上你可以创建一个匿名函数或使用一个命名函数（但不是你尝试过的）这种方法使用命名函数，但调用方式不同。

<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菜单，所以不需要内联事件处理程序。

<select class='Nom' name='Nom' id='Nom'>

....代码的其余部分

更新：上面的代码根本没有经过测试，但是我已经确定你可以使用它了。有一点需要注意的是，当我最初尝试使用代码$('select.Nom').chosen({ width:"50%" }).change时，它会抛出错误，因此我从中删除了.chosen({ width:"50%" })，后面的内容似乎正常。

<?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>

将onchange函数添加到所选的jquery wordpress

1 个答案: