下拉選擇菜單AJAX響應後丟失CSS樣式

我有一個表格，用戶可以選擇他的國家，然後根據所選擇的國家，表格的下拉列表（選擇）更改爲州/省那個國家。到現在爲止還挺好。問題在於下拉選擇表單使用CSS樣式。最初加載頁面時，一切都很完美，但是當調用ajax腳本，然後更改州/省下拉菜單時，它將返回無格式，所以基本上它會丟失所有樣式。有誰知道如何解決這個問題？代碼的樣式是正確的，出於某種原因，它只是在Ajax返回時不執行它。下拉選擇菜單AJAX響應後丟失CSS樣式

這裏是jQuery代碼：

function state_box(country, user_id) 
{ 
    xmlHttp=GetXmlHttpObject(); 

    if (xmlHttp==null) 
    { 
      alert ("Browser does not support HTTP Request"); 
      return; 
    } 

    var url = relative_path + 'states.php'; 
    var action = url + '?country_id=' + country.value; 

    xmlHttp.onreadystatechange = function() { 
      if (xmlHttp.readyState == 4) 
      { 
        var response = xmlHttp.responseText; 
        document.getElementById('stateBox').innerHTML = response; 
      } 
    }; 
    xmlHttp.open("GET", action, true); 
    xmlHttp.send(null); 
}

而且states.php的內容，基本上只是返回的下拉列表中，沒有任何幻想：

 $display_output = '<select class="mystyle" name="dropdown" id="dropdown"> '; 
     $display_output .= '<option value="" selected>Select a State</option> '; 

     while ($state_details = $this->fetch_array($sql_select_states)) 
     { 
      $display_output .= '<option value="' . $state_details['id'] . '" ' . (($selected_value == $state_details['id']) ? 'selected' : ''). '>' . $state_details['s.name'] . '</option>'; 
     } 

     $display_output .= '</select>'; 

    $display_output = ($in_ajax) ? $display_output : '<div id="stateBox">' . $display_output . '</div>'; 

    return $display_output;

唯一的問題主要是，CSS類「 mystyle「在ajax返回後未在瀏覽器中格式化。

來源

2013-01-21 user1996496

而不是生成整個選擇框作爲響應。只需單獨生成選項並將其放入JavaScript中的選擇框中即可。試試這個，

PHP Code : 

$display_output = '<option value="" selected>Select a State</option> '; 

while ($state_details = $this->fetch_array($sql_select_states)) 
{ 
    $display_output .= '<option value="' . $state_details['id'] . '" ' . (($selected_value == $state_details['id']) ? 'selected' : ''). '>' . $state_details['s.name'] . '</option>'; 
} 

return $display_output;

而在JavaScript中，

xmlHttp.onreadystatechange = function() { 
      if (xmlHttp.readyState == 4) 
      { 
        var response = xmlHttp.responseText; 
        document.getElementById('dropdown').innerHTML = response; 
      } 
    };

它不會影響你的CSS和選擇框也。

但我建議你去與Jquery未來的腳本要求。

來源

2013-01-21 09:22:35

哇，這是一個奇妙的想法！我現在就試試:)謝謝你！ – user1996496

嗯，我試過了。它在初始加載時加載正常，下拉菜單正確顯示，但是當我更改國家時，它會顯示以文本格式輸出的下拉菜單。基本上以明文形式一行接一行，沒有實際的下拉。 – user1996496

它應該完美地工作。請檢查你的選擇框ID是否正確，你做了一切正確的 –

下拉選擇菜單AJAX響應後丟失CSS樣式

回答

相關問題