Question

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

在这个HTML页面中，我想将两个值传递给一个ajax函数，但它不能从第二个下拉列表中传递值。但是从第一个下拉列表开始，用户名为＆＃39;将值传递给ajax，但是从第二次下拉，它不能将值传递给ajax函数

下面查看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";
}
?>

Answer 1

原因是因为您总是在寻找第一个选择框值而不是选择框。请将您的功能更改为：

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
}

并选择这个：

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

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

Answer 2

您需要从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 showUser(){
    var formElements = document.getElementById("thisform");
    var usersValue = formElements[0].value);
    var users2Value = formElements[1].value);

    // do stuff  
}

Answer 3

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

//在你的代码中，当第一个参数设置时，第二个是空的......＆amp;当发送onchange呼叫时，第一个将清空

<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";
    }
?>

如何从两个下拉列表中传递两个值或参数到ajax？

3 个答案: