如何在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結果

回答

相關問題