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

我正在创建几个下拉菜单，根据选定的上一个下拉值来填充。如何在HTML下拉菜单中显示AJAX结果

到目前为止，我能够成功地使用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; 

?> 
~

所以，基本上我只需要知道如何将由AJAX收集的值附加到下拉菜单“区域”。

来源

2012-04-23 jmg0880

no raw'XMLHttpRequest'，强烈推荐jQuery。 – 2012-04-23 00:36:19

@SiweiShen - jQuery中的等价物是什么？你可以指点我的资源？ – jmg0880 2012-04-23 00:38:57

谷歌官网，有很多文件。请参阅：http://api.jquery.com/jQuery.ajax/。首先，看看它的“选择器”是如何工作的，然后检查它的'ajax'方法。很简单。 – 2012-04-23 01:34:26

This site帮了我很大的时间，也here。 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通话期待，您可能需要串联你的结果无论你喜欢怎么弄的完整列表。

来源

2012-04-23 00:46:14

是否可以将发送到服务器的数据设置为所选项目的文本？ 'var $ data = $（'areas option：selected'）。text（）; data：$ data' – jmg0880 2012-04-25 02:46:54

是的，但您必须点击下拉菜单中的功能。你正在尝试做两件不同的事情，一个是从ajax填充下拉列表，另一个是将数据作为数据发送给ajax。除非您从前一个下拉列表中选择。您是否在dropdown1中产生了一些选择 - >将该选择作为数据发送到ajax以创建下一个下拉列表？另外，你在js中将你的变量decleration混淆为php javascript：var varName =“string”; php：$ varName =“string”; – 2012-04-25 15:32:43

用户从下拉菜单中选择1 - >将选择文本发送到php并用于收集要在第二个下拉菜单中填充的数据 - >用户从下拉菜单中选择一些东西 - >等等... – jmg0880 2012-04-25 19:26:52

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

回答

相关问题