堆栈内存溢出
  简体   繁体   English

如何将两个下拉列表中的两个值或参数传递给ajax？

[英]how to pass two values or arguments from two dropdown to ajax?

 原文  2017-01-19 06:38:56  0   3    javascript/ php/ jquery/ mysql/ 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. 从这个HTML页面，我想将两个值传递给一个ajax函数，但是它不能从第二个下拉列表传递值。 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 但是从名称为'users'的第一个下拉列表中，可以将值传递给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
 1 已采纳  2017-01-19 06:47:09

Reason is because You are always looking for the first selectbox value not the selectbox.Change your function to this: 原因是因为您一直在寻找第一个选择框值而不是选择框。将函数更改为此： 

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
 1  2017-01-19 06:55:12

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
 0  2017-01-19 06:58:30

// 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 //在您的代码中，当第一个参数设置的第二个为空时...＆当发送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";
    }
?>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何将两个值从PHP传递到Ajax - How to Pass Two Values From PHP to Ajax javascript如何将两个值传递给php ajax - javascript how to pass two values to php ajax 如何将两个参数传递给 ajax 函数调用的 python 函数？ - How to pass two arguments to a python function that is being called by ajax function? 比较下拉列表中的两个值 - Comparing two values from Dropdown 如何使用JavaScript Ajax将两个值传递给PHP文件 - How to pass two values to a PHP file using javascript Ajax javascript-如何传递两个参数以使用Javascript从不同的源函数？ - How to pass two arguments to function from different sources with Javascript? 如何从两个下拉列表中获取价值并将其传递给不同的网址？ - How to get value from two dropdown and pass it to different url? 如何在CoffeScript中传递两个匿名函数作为参数？ - How to pass two anonymous functions as arguments in CoffeScript? 从两个下拉列表中选择值时如何显示div？ - How to display a div when values are selected from TWO dropdown? 使用JavaScript的数组中的两个下拉值 - Two dropdown values from an array using JavaScript
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM