下拉选择菜单AJAX响应后丢失CSS样式

Question

我有一个表格，用户可以选择他的国家，然后根据所选择的国家，表格的下拉列表（选择）更改为州/省那个国家。到现在为止还挺好。问题在于下拉选择表单使用CSS样式。最初加载页面时，一切都很完美，但是当调用ajax脚本，然后更改州/省下拉菜单时，它将返回无格式，所以基本上它会丢失所有样式。有谁知道如何解决这个问题？代码的样式是正确的，出于某种原因，它只是在Ajax返回时不执行它。

这里是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返回后未在浏览器中格式化。

Answer 1

而不是生成整个选择框作为响应。只需单独生成选项并将其放入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未来的脚本要求。