Php ajax响应后，下拉选择菜单失去css样式

我有一个表单，用户可以选择他的国家，然后根据选择的国家，表单的下拉选择将更改为该国家的州/省列表。到现在为止，一直都还不错。问题是下拉选择表单是用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;

---

唯一的问题是，在ajax返回CSS类mystyle后，它在浏览器中没有格式化。

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

它不会影响你的CSS和选择框

---

但是我建议您在未来的脚本需求中使用Jquery。

哇，这是一个很棒的主意！我现在就试试看：非常感谢！嗯，我试过了。它在初始加载时加载良好，下拉列表显示正确，但当我更改国家/地区时，它会显示以类似文本格式输出的下拉列表。基本上是一行接一行的纯文本，没有实际的下拉列表。它应该可以完美地工作。请检查您的选择框id是否正确，您所做的一切都正确是的，绝对正确。我可以在国家之间切换，它可以以纯文本的形式正确显示省/州。当我最初加载表单时，它会选择默认的国家/地区，所有的州都正确，并在下拉列表中正确显示，而在切换时，它会将它们显示为纯文本列表，而不会返回到下拉列表。怪异：坐着绝对正确。我仔细检查了名称、div等。ajax现在返回的唯一输出是带有上面代码的选项。它周围的所有内容都硬编码到HTML中，从外部div到选择选项。

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