使用Ajax填充下拉列表

-1

總的noob to ajax在這裏，我與這個語法有多接近？我希望第二個下拉框依賴於第一個下拉框。我知道這不是解決這個問題最簡單的方法，所以任何幫助都是值得讚賞的。 acura.txt是一個帶有標記的文本文件，用於創建另一個下拉列表。謝謝大家的幫助！使用Ajax填充下拉列表

的JavaScript：

function loadXMLDoc() { 
    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("acura").innerHTML = xmlhttp.responseText; 
     } 
    } 
    xmlhttp.open("GET", "acura.txt", true); 
    xmlhttp.send(); 
}

HTML：

<select id="stateinjured"> 
    <option selected="selected">Select your state</option> 
    <option id="acura" onClick="loadMXLDOC">Acura</option> 
    <option id="bmw">BMW</option> 
    <option id="audi">Audi</option> 
    <option id="benz">Benz</option> 
</select>

來源

2010-12-14 braveowl

你有沒有考慮過使用像jQuery這樣的ajax框架，或者僅僅是爲了你自己的知識？ – 2010-12-14 14:57:09

遠離你用jquery標記它...... – 2010-12-14 14:57:43

你已經將它標記爲jquery，但是「儘管我可以看到，似乎沒有使用它」。如果你想要一個jQuery的方式來做到這一點，那麼有更好的方法（它建立在Ajax調用的很好的語法）。如果你想堅持使用非jQuery，那麼你可能想要拿走那個標籤。 :) – Chris 2010-12-14 14:59:58

它行不通飽食一頓<select>標籤（擁有自己<option>內容，大概）到的內容<option>標記。這就是你的代碼現在要做的事情。

這這裏代碼：

if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    document.getElementById("acura").innerHTML=xmlhttp.responseText; 
    }

的元素，它的「ID」值「謳歌」是<select>頁面上的<option>標籤之一。因此，如果回覆文字只是<select>，它將會出現在錯誤的地方。

也許你只是想要在頁面上的另一個<span>或什麼;這取決於它看起來應該是什麼樣子。

另一件事：你不想在<option>上拿起「點擊」事件。可以選擇一個選項（由用戶），而不發生任何「點擊」。可能您應該跟蹤<select>標記上的「更改」事件，並檢查處理程序中的值。

來源

2010-12-14 15:00:23 Pointy

頁面的外觀對我來說現在並不重要，我只是想弄清楚什麼是正確的代碼，然後從那裏:)。我真正需要它做的是選擇其中一個狀態並用文本文件填充它。我會刪除選擇標籤，謝謝。 – braveowl 2010-12-14 15:05:33

嗯..不太確定你的意思，（對不起< - noob）。你能解釋一下好嗎？ – braveowl 2010-12-14 15:09:06

Pointy突出顯示了過於分離的問題。首先，您需要將新選擇菜單插入到第一個選擇菜單之外的其他容器中，例如與其相鄰的div。其次，在選擇標籤中使用onChange事件處理程序，而不是在選項標籤中使用onClick事件處理程序，以便使用鼠標或鍵盤選擇菜單項時調用該函數。當onChange中的函數被調用時，檢查所選選項的值是否應該創建第二個下拉列表。 – jonesbp 2010-12-14 15:19:54

使用Ajax填充下拉列表

回答

相關問題