php - 下拉选择菜单在 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 来满足 future 的脚本需求。