Javascript 获取所选数据并填充文本框

我试图为使用我们内部应用程序的用户制作一个易于使用的表单。基本上我有一个select元素。我想要的是当我选择任何我想要填充指定文本框的内容时

代码如下。这很好，但只填充1个框。请不要忘记，通常我从mySQL数据库获取数据

html文件：

<script src="choose.js"></script>
<select onchange="ChooseGuest(this.value)">
<option value="1">guest 1</option>
<option value="2">guest 2</option>
<option value="3">guest 3</option>
</select>
<input type="text" id="guestdetails"/>
<input type="text" id="guestdetails2"/>

$AskForIt = $_GET["q"];
If ($AskForIt == "1") {
echo "guest 1 data";
} Elseif ($AskForIt == "2") {
echo "guest 2 data";
} Elseif ($AskForIt == "3") {
echo "guest 3 data";
}

var xmlHttp

function ChooseGuest(str)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
  {
  alert ("upgrade your browser");
  return;
  }
var url="guests.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}

function stateChanged()
{
if (xmlHttp.readyState==4)
{
document.getElementById("guestdetails").value=xmlHttp.responseText;
}
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
return xmlHttp;
}

js文件：

<script src="choose.js"></script>
<select onchange="ChooseGuest(this.value)">
<option value="1">guest 1</option>
<option value="2">guest 2</option>
<option value="3">guest 3</option>
</select>
<input type="text" id="guestdetails"/>
<input type="text" id="guestdetails2"/>

$AskForIt = $_GET["q"];
If ($AskForIt == "1") {
echo "guest 1 data";
} Elseif ($AskForIt == "2") {
echo "guest 2 data";
} Elseif ($AskForIt == "3") {
echo "guest 3 data";
}

var xmlHttp

function ChooseGuest(str)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
  {
  alert ("upgrade your browser");
  return;
  }
var url="guests.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}

function stateChanged()
{
if (xmlHttp.readyState==4)
{
document.getElementById("guestdetails").value=xmlHttp.responseText;
}
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
return xmlHttp;
}

---

据我所知，您试图用从数据库中提取的数据填充输入框，并根据选择的下拉列表显示相应的数据。PHP只是服务器端。一旦页面加载，PHP将只运行一次，直到页面重新加载后才会再次运行。因此，您需要使用JS访问这些变量。这可能就是为什么只填写第一个选项

如果是这样，您将需要进入PHP文件并创建与从DB访问的数据相等的JS变量。只需将JS变量设置为PHP中变量的PHP回显：

PHP数据文件

<?php

    var somePHPvar = "DB Value";

?>

<script> 

    var someVar = <?php echo somePHPvar; ?>; 


</script>

var someVar=；

---

如果这些都是在同一个PHP文件上完成的，不要忘记将其包含在页面上并调用这些JS变量。从那里，您可以使用JS填充这些值

以下是一种只需jQuery就可以实现的方法

例如：

JavaScript

var myData = [
  "guest 1 data",
  "guest 2 data",
  "guest 3 data"
];
$(function() {
  function ChooseGuest(v, str) {
    // Example AJAX Post call in jQuery
    // Replace '/echo/json/' with 'guests.php'
    // or use $.get() in the same way
    $.post("/echo/json/", {
      json: JSON.stringify(myData),
      q: str
    }, function(results) {
      console.log(results, v);
      $("#guestdetails" + v).val(results[v - 1]);
    });
  }
  $("#guestSelect option").click(function() {
    var selVal = parseInt($(this).val());
    var selText = $(this).html();
    ChooseGuest(selVal, selText);
  });
});

由于JSFIDLE的性质和示例的制作方式，您的代码将有点不同。我建议：

  function ChooseGuest(v, str) {
    $.get("guests.php", {
      q: str,
      sid: Math.random()
    }, function(results) {
      console.log(results, v);
      $("#guestdetails" + v).val(results);
    });
  }

---

您可以使用jQuery AJAX代替HTTP。欢迎使用堆栈溢出。这段代码乍一看是正确的。什么具体不起作用或者人们如何提供帮助？您的代码只设置为填充第一个框，如本文所示。getElementById（“guestdetails”）。value=xmlHttp.responseText；