0

ユーザーが自分の国を選択できるフォームがあり、選択した国に応じて、フォームのドロップダウン (選択) がその国の州/州のリストに変わります。ここまでは順調ですね。問題は、ドロップダウン選択フォームが 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 によって返された後、ブラウザーでフォーマットされないことです。

4

1 に答える 1

0

応答で選択ボックス全体を生成する代わりに。オプションを単独で生成し、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-21T09:22:35.553 に答える