Javascript 如何在HTML下拉菜单中显示AJAX结果_Javascript_Ajax

Javascript 如何在HTML下拉菜单中显示AJAX结果

javascript ajax

Javascript 如何在HTML下拉菜单中显示AJAX结果,javascript,ajax,Javascript,Ajax,我正在创建一些下拉菜单，这些菜单根据之前选择的下拉值填充到目前为止，我能够成功地使用ajax从php脚本中获取数据，但是，我不知道如何将该数据附加到第二个名为AREAS的下拉列表中 HTML / Javascript / AJAX <html> <head> <title>IPSLA Report</title> <script type="text/javascript"> functio

我正在创建一些下拉菜单，这些菜单根据之前选择的下拉值填充

到目前为止，我能够成功地使用ajax从php脚本中获取数据，但是，我不知道如何将该数据附加到第二个名为AREAS的下拉列表中

HTML / Javascript / AJAX
    <html>
    <head>
      <title>IPSLA Report</title>
    <script type="text/javascript">
    function changeSelections() {
      var departments = document.selections.department;
      var areas = document.selections.areas;
      var months = document.selections.months;
      var years = document.selections.years;
      var s = document.getElementById("department");

      switch(departments.selectedIndex) {
        case 0:
          areas.options.length = 0;
          months.options.length = 0;
          years.options.length = 0;

          areas.options[0] = new Option("Select an Area");
          months.options[0] = new Option("Select a Month");
          years.options[0] = new Option("Select a Year");
          departments.options[0].selected = true;
          break;

        default:
          months.options.length = 0;
          years.options.length = 0;

          months.options[0] = new Option("Select a Month");
          years.options[0] = new Option("Select a Year");

          var pass = s.options[s.selectedIndex].text;
          ajaxFunction(pass);
      }

    }


    function ajaxFunction(pass) {

    var ajaxRequest;
      try {
         ajaxRequest = new XMLHttpRequest();
      }
      catch(e) {
        try {
          ajaxRequest = new ActiveXObjext("Msxml2.XMLHTTP");
        }
        catch(e) {
          try {
            ajaxRequest = new ActiveXObjext("Microsoft.XMLHTTP");
          }
          catch(e) {
            alert("Please use another browser");
            return false;
          }
        }
      }
      ajaxRequest.onreadystatechange = function() {
        if (ajaxRequest.readyState == 4) {
          var ajaxDisplay = document.getElementById("areas");
          if (ajaxDisplay != null) {
          ajaxDisplay.options.selectedIndex.text = ajaxRequest.responseText;
          }
          else {
            document.write("NULL!!!");
          }
        }
      }

      if (pass == "CRAN") {
        var active_id = '0';
      }

      var queryString = "?active_id=" + active_id;
      ajaxRequest.open("GET","db_connect.php" + queryString, true);
      ajaxRequest.send(null);

    }
    </script>
    </head>
    <body>
    <div id="wrapper">
      <div id="select">
        <form name="selections" id="selections" action="">
          <select name="department" id="department" onChange="changeSelections()">
            <option value="none">Select Department</option>
            <option value="none">CRAN</option>
            <option value="none">BackBone</option>
            <option value="none">Datacenter</option>
            <option value="none">Enterprise</option>
          </select>


          <select name="areas" id="areas" onChange="changeMonth()">
            <option value="none">Select an Area</option>
          </select>

          <select name="months" id="months" onChange="changeYear()">
            <option value="none">Select a Month</option>
          </select>

          <select name="years" id="years" onChange="go(this)">
            <option value="none">Select a Year</option>
          </select>
        </form>
      </div>


      <div id="image">

      </div>


      <div id="incidents">

      </div>
    </div>
    </body>
    </html>

PHP Script
<?php
  $host = "";
  $dbName = "";
  $username = "";
  $password = "";

  $conn = mysql_connect($host,$username,$password);
  $db = mysql_select_db($dbName,$conn);

  $dept_id = $_GET['id'];

  $area_query = "SELECT area_name FROM incident_area WHERE FK_dept= '$dept_id'";
  $area_result = mysql_query($area_query);

 $options = "";
  while ($area_row = mysql_fetch_assoc($area_result)) {
     #$options .= '<option value="'.$area_row['area_name'].'">'.$area_row['area_name'].'</option>';
      $options .= $area_row['area_name'];
  }
 echo $options;

?>
~

HTML/Javascript/AJAX
伊普斯拉报告
函数changeSelections（）{
var部门=document.selections.department；
变量区域=document.selections.areas；
var月数=document.selections.months；
变量年份=document.selections.years；
var s=document.getElementById（“部门”）；
开关（部门。选择索引）{
案例0：
areas.options.length=0；
months.options.length=0；
years.options.length=0；
区域。选项[0]=新选项（“选择区域”）；
月份。选项[0]=新选项（“选择一个月”）；
年份。选项[0]=新选项（“选择年份”）；
departments.options[0]。selected=true；
打破
违约：
months.options.length=0；
years.options.length=0；
月份。选项[0]=新选项（“选择一个月”）；
年份。选项[0]=新选项（“选择年份”）；
var pass=s.options[s.selectedIndex].text；
ajaxFunction（pass）；
}
}
函数ajaxFunction（通过）{
var ajaxRequest；
试一试{
ajaxRequest=新的XMLHttpRequest（）；
}
捕获（e）{
试一试{
ajaxRequest=newActiveXOBJEXT（“Msxml2.XMLHTTP”）；
}
捕获（e）{
试一试{
ajaxRequest=newActiveXobjext（“Microsoft.XMLHTTP”）；
}
捕获（e）{
警告（“请使用其他浏览器”）；
返回false；
}
}
}
ajaxRequest.onreadystatechange=函数（）{
if（ajaxRequest.readyState==4）{
var ajaxDisplay=document.getElementById（“区域”）；
如果（ajaxDisplay！=null）{
ajaxDisplay.options.selectedIndex.text=ajaxRequest.responseText；
}
否则{
document.write（“NULL！！！”）；
}
}
}
如果（通过=“起重机”）{
var active_id='0'；
}
var queryString=“？active_id=“+active_id”；
打开（“GET”，“db_connect.php”+queryString，true）；
ajaxRequest.send（空）；
}
选择部门
克兰
骨干
数据中心
企业
选择一个区域
选择一个月
选择一年
PHP脚本
~

因此，基本上我只需要知道如何将AJAX收集的值附加到下拉菜单“区域”中。这也帮了我很大的忙。Jquery是一条路要走。它将允许您将数据附加到html中，并创建您要查找的动态下拉列表

Javascript
// needs hotlink to jquery file, for library to work right. 
var options = "";
$(document).ready(function(){
    $.post("./file.php", { postVariableInPHPFile: "some string" }, function(data) {
        options = data; // data is the return from the AJAX call 
    });
});

根据您希望从PHP调用中获得的数据量，您可能需要以任何方式连接结果以获得完整列表

没有原始的

XMLHttpRequest

，强烈建议使用jQuery。@SiweiShen-jQuery中的等价物是什么？你能指给我看的资源吗？谷歌的官方网站，有很多文档。请参阅：。首先，检查它的“选择器”是如何工作的，然后检查它的“ajax”方法。非常简单。是否可以将发送到服务器的数据设置为所选项目的文本<代码>var$data=$（'areas option:selected'）。text（）；data:$data是，但您必须单击下拉菜单功能。您尝试做两件不同的事情，一件是从ajax填充下拉列表，另一件是将选择作为数据发送到ajax。除非您正在发送上一个下拉列表中的选择。您是否让dropdown1生成一些选项->将该选项作为数据发送到ajax以创建下一个下拉列表？此外，您还将js中的变量declaration与php javascript:var varName=“string”混淆；php:$varName=“string”；用户从下拉列表1中选择内容->选择文本被发送到php并用于收集要在第二个下拉列表中填充的数据->用户从下拉列表2中选择内容->等等。。。等等……假设您有PHP设置来获取查询的POST数据，只需让dropdown1 javascript执行类似于

$（“#dropdown1 option”）.is（“selected”）.text（）的操作即可将获得所选选项的文本，将其用于PHP ajax请求