如何将两个值或参数从两个下拉菜单传递到ajax?

index.php

index . php

<!DOCTYPE html>
<html>
    <head>
        <script>
            function showUser(str,str1) {
                if (str=="") {
                    document.getElementById("txtHint").innerHTML="";
                    return;
                }
                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","getdata.php?q="+str+"&s="+str1,true);
                xmlhttp.send();
            }
        </script>
    </head>
    <body>
        <form>
            <select name="users" onchange="showUser(this.value)">
                <option value="0">Select a person:</option>
                <option value="1">Peter Griffin</option>
                <option value="2">Lois Griffin</option>
                <option value="3">Joseph Swanson</option>
                <option value="4">Glenn Quagmire</option>
            </select>
            <select name="users2" onchange="showUser(this.value)">
                <option value="0">Select a person:</option>
                <option value="5">Peter Griffin</option>
                <option value="6">Lois Griffin</option>
                <option value="7">Joseph Swanson</option>
                <option value="8">Glenn Quagmire</option>
            </select>
        </form>
        <br>
        <div id="txtHint">
            <b>
                Person info will be listed here.
            </b>
        </div>
    </body>
</html>

From this HTML page i want to pass two values to one ajax function but it can't pass value from second dropdown. But from first dropdown which is with name 'users' pass value fine to ajax but from 2nd dropdown it cant pass value to ajax function

从这个HTML页面，我想将两个值传递给一个ajax函数，但它不能从第二个下拉菜单中传递值。但是从第一个下拉菜单中用户可以将值传递给ajax但从第二个下拉菜单中不能将值传递给ajax函数

Below check getdata.php getdata.php

getdata下面检查。php getdata.php

<?php
echo "ab";  
echo $_GET['s'];
if($_GET['q']==1)
{
    echo "7";
}
if($_GET['q']==2)
{
    echo "2";
}
if($_GET['q']==3)
{
    echo "3";
}
if($_GET['s']==7)
{
    echo "4";
}
?>

3 个解决方案

#1

Reason is because You are always looking for the first selectbox value not the selectbox.Change your function to this:

原因是您总是在寻找第一个selectbox值，而不是selectbox。将你的功能改为:

function showUser() {

    var str=document.getElementById("user").value;
    var str1=document.getElementById("user2").value;
  if (str==0) {// if nothing is selected from first drop down
    document.getElementById("txtHint").innerHTML="";
    return;
  } 
  .......
........//rest of the code
}

and your select to this:

你的选择是:

<select name="users" id="user" onchange="showUser()"><!--added id here in select-->

<select name="users2" id="user2" onchange="showUser()"><!--added id here in select-->

#2

You need to reference the form data from inside the onChange handler function.

您需要从onChange处理程序函数中引用表单数据。

<form id="thisform" onChange="showUser()">
<select name="users">
    <option value="0">Select a person:</option>
    <option value="1">Peter Griffin</option>
    <option value="2">Lois Griffin</option>
    <option value="3">Joseph Swanson</option>
    <option value="4">Glenn Quagmire</option>
</select>
<select name="users2">
    <option value="0">Select a person:</option>
    <option value="5">Peter Griffin</option>
    <option value="6">Lois Griffin</option>
    <option value="7">Joseph Swanson</option>
    <option value="8">Glenn Quagmire</option>
</select>
</form>

Function Handler could look similiar to this:

函数处理程序可以看起来很相似:

function showUser(){
    var formElements = document.getElementById("thisform");
    var usersValue = formElements[0].value);
    var users2Value = formElements[1].value);

    // do stuff  
}

#3

// Here you call javascript function with 2 parameter & these both parameters requires...so go with below code...

//In your code when 1st parameter set the 2nd is empty... & when send onchange call then 1st will empty

//在您的代码中，当第一个参数设置为第2个参数时，第2个参数为空……当发送onchange调用时，第1个将是空的。

<html>
<head>

<script>
function showUser() {

    var str;
    var str1;

    str=document.getElementById("users").value;
    str1=document.getElementById("users2").value;
    alert(str);
    alert(str1);
    if(str!=''&& str!=0 && str1!='' && str1!=0)
    { 
      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","getdata.php?q="+str+"&s="+str1,true);
       xmlhttp.send();
    }
}


</script>
</head>
<body>

<form>
<select name="users" id="users" onchange="showUser()">
<option value="0">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Joseph Swanson</option>
<option value="4">Glenn Quagmire</option>
</select>
<select name="users2" id="users2" onchange="showUser()">
<option value="0">Select a person:</option>
<option value="5">Peter Griffin</option>
<option value="6">Lois Griffin</option>
<option value="7">Joseph Swanson</option>
<option value="8">Glenn Quagmire</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here.</b></div>

</body>
</html>

<?php
echo "ab";  
echo $_GET['s'];
    if($_GET['q']==1)
    {
        echo "7";
    }
    if($_GET['q']==2)
    {
        echo "2";
    }
    if($_GET['q']==3)
    {
        echo "3";
    }
    if($_GET['s']==7)
    {
        echo "4";
    }
?>

#1