阿賈克斯與2下拉菜單

我有2個下拉菜單。用戶從每個我希望爲AJAX生成的答案選擇一個選項後。我可以只用一個下拉使用發現這裏的例子中做到這一點：阿賈克斯與2下拉菜單

http://www.w3schools.com/php/php_ajax_database.asp

我按照一些建議，試圖修改腳本2名的下拉列表中，但我一直不成功。看起來數據沒有被髮布到getuser.php頁面。

我的HTML代碼頁如下：

<?php 
    require('includes/application_top.php'); 
?> 

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<script type="text/javascript"> 
function showUser(current_size, current_shoe) 
{ 
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 (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText; 
    } 
    } 
xmlhttp.open("GET","getuser.php?size="+current_size"&shoe="current_shoe); 
xmlhttp.send(); 
} 
</script> 
</head> 
<body> 

    <?php 
    $query = "SELECT products_name, products_shoe_size FROM products_description WHERE language_id = 1 and products_shoe_size != '' "; 
    // Execute it, or return the error message if there's a problem. 
    $result = mysql_query($query) or die(mysql_error()); 

    ?> 

    <form> 
     <?php 

     $dropdown = "<select name='current_shoe' id='current_shoe'><option value=''>Select the model of your current shoes:</option>"; 
    while($row = mysql_fetch_assoc($result)) { 
     $dropdown .= "\r\n<option value='{$row['products_shoe_size']}'>{$row['products_name']}</option>"; 
    } 
    $dropdown .= "\r\n</select>"; 
    echo $dropdown; 

    ?> 

<select name="current_size" id="current_size" onchange="showUser(Document.getElementById('current_size').value, Document.getElementById('current_shoe').value)"> 
<option value="">Select the size of your current shoes:</option> 
<option value="2">2</option> 
<option value="2.5">2.5</option> 
<option value="3">3</option> 
<option value="3.5">3.5</option> 
<option value="4">4</option> 
<option value="4.5">4.5</option> 
<option value="5">5</option> 
<option value="5.5">5.5</option> 
<option value="6">6</option> 
<option value="6.5">6.5</option> 
<option value="7">7</option> 
<option value="7.5">7.5</option> 
<option value="8">8</option> 
<option value="8.5">8.5</option> 
<option value="9">9</option> 
<option value="9.5">9.5</option> 
<option value="10">10</option> 
<option value="10.5">10.5</option> 
<option value="11">11</option> 
<option value="11.5">11.5</option> 
<option value="12">12</option> 
<option value="12.5">12.5</option> 
<option value="13">13</option> 
</select> 

</form> 

<br /> 
<div id="txtHint"><b>Sizing info will be listed here.</b></div> 

</body> 
</html> 
    <?php require(DIR_WS_INCLUDES . 'application_bottom.php'); ?>

我猜測，這個問題可以在這行代碼中的一個發現：

function showUser(current_size, current_shoe) 

xmlhttp.open("GET","getuser.php?size="+current_size"&shoe="current_shoe); 

<select name="current_size" id="current_size" onchange="showUser(Document.getElementById('current_size').value, Document.getElementById('current_shoe').value)">

如果任何人有任何想法是什麼我做錯了，我會永遠感激。我的頭髮快沒了。

來源

2011-10-08 nico55555

不是在返回if（str ==「」）{返回你每次你打電話給showUser？永遠不要執行其餘的代碼？ – Tjirp

我意識到這個評論並沒有回答你的問題，但是你會通過使用像jQuery這樣的JavaScript庫爲你節省大量的時間。 – kroehre

首先，當你打電話的變化事件處理showUser功能，你需要使用document.getElementById，不（注意小寫d - 在JavaScript變量是區分大小寫）。

其次是str定義？在showUser函數中，您檢查它是否爲空字符串，但是如果沒有定義，將會拋出ReferenceError。

除此之外，它似乎永遠不會改變xmlhttp變量，所以它會泄漏到全局範圍內，這是不好的做法。您應該在每個變量的範圍頂部使用var關鍵字來聲明每個變量。

來源

2011-10-09 00:01:43

感謝您的提示。我已更改爲小寫，並擺脫此代碼： – nico55555

感謝您的提示。我已經從'D'更改爲'd'並且擺脫了空str檢查（這是我使用的示例中的剩餘代碼），但問題仍然存在。選擇第二個下拉菜單似乎沒有任何魔力。 – nico55555

阿賈克斯與2下拉菜單

回答

相關問題