将onchange函数添加到所选的jquery wordpress [英] add onchange function to the chosen jquery wordpress

问题描述

当我尝试将onchange函数添加到js文件Onchange时，我遇到了问题:

I have problems when i tried to add the onchange function to the js file Onchange i got it from :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'];
  }
   }

   ?>

所以我真正需要的是在我使用以下代码创建的下拉列表中选择一个名称(Nom)时显示Adresse信息:

So what i need exactly is to display the Adresse information when i selct a name (Nom) From My dropdown list which i creat with this code :

<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非常复杂，我真的需要您的帮助. 谢谢

I am using the chosen plugin wordpress for the dropdown list... it's very complicated with wordpress and i really need your help. thank you

推荐答案

我根本不使用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>

这篇关于将onchange函数添加到所选的jquery wordpress的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！