0

ドロップダウンの国がデータベースから取得されている html フォームがあります。ユーザーが国を選択すると、選択した国に基づいて都市のドロップダウンが表示されます。

ユーザーがフォームのフィールドに間違って入力した場合 (このフォームには他のフィールドがあります)、国ドロップダウンはユーザーが最初に選択した国を記憶しますが、都市をクリアして にリセットし--Select City--ます。都市名を選択しようとしていますが、選択できません。何か案が？

HTMLフォームはこちら：

<tr>
    <td>PAYS <span style="color: #FF0000;">*</span></td>
    <td>
<select name="country" class="country">
<option value="">Select</option>

<?php
    $sql=mysql_query("select * from country");
    while($row=mysql_fetch_array($sql))
    {
        $id=$row['Code'];
        $data=$row['Name']; 
        $data = mb_convert_encoding($data, 'UTF-8');
    if($id == $_POST['country'])
    {
        $sel = 'selected="selected"';
    }
    else
    {
        $sel = "";
    }

        echo '<option value="'.$id.'"' . $sel . '>'.$data.'</option>';
    }
?>
</select>   
</td>
</tr>   

<tr>
<td>City</td>
    <td>
    <select class="city" name="city">
<option selected="selected" value="">--Select City--</option>
</select>   
    </td>
</tr>

ここにAjaxコード：

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".country").change(function()
{
var id=$(this).val();
var dataString = 'id='+ id;

$.ajax({
    type: "POST",
    url: "ajax_city.php",
    data: dataString,
    cache: false,
    success: function(html)
{
$(".city").html(html);
} 
});

});
});
</script>

ajax_city.phpはこちら

<?php
require_once("toplevel/content/database/databd.php");
if($_POST['id'])
{
    $id=$_POST['id'];
    $sql=mysql_query("select Name from cities WHERE CountryCode ='$id'");
    while($row=mysql_fetch_array($sql))
    {
        $id=$row['Code'];
        $data=$row['Name'];
    if($_POST['city'] == $data)
    {
    $sel = 'selected = "selected"'; 
    }
    else
    {
    $sel = " ";
    }
     echo '<option value="'.$data.'" ' .$sel . ' >'.$data.'</option>';
    } 
}
?>
4

3 に答える 3

1

AJAX リクエストでは、データを として定義しており、JSON マップが期待されるデータ スタイルPOSTを提供しているためです。GETその場合、PHP スクリプトは予期された を受信せIDず、何も起こりません。

このようにしてみてください：

$(document).ready(function () {
    $(".country").change(function () {
        var myId = $(this).val();

        $.ajax({
            type: "POST",
            url: "ajax_city.php",
            data:{id : myId},
            cache: false,
            success: function (html) {
                $(".city").html(html);
            },
            error : function(jqXHR, textStatus, errorThrown) {
                alert('An error occurred!')
            }
        });

    });
});
于 2013-03-23T10:01:12.817 に答える
0

投稿されたIDが有効であることを確認してください。id が正しければ、Mozilla で firebug を使用して同じことを確認できます。

成功関数では、html() の代わりに append() 関数を使用します。

$(document).ready(function () {
    $(".country").change(function () {
        var myId = $(this).val();

        $.ajax({
            type: "POST",
            url: "ajax_city.php",
            data:{id : myId},
            cache: false,
            success: function (html) {
                $(".city").append(html);
            }
        });

    });
});
于 2013-03-23T10:10:11.770 に答える
0

コメントとして述べたように、クライアント側を検証して、有効でない場合にフォームが投稿されないようにすることです。そうすれば、サーバーから取得した都市名が失われることはありません。これは絶対確実というわけではありませんが、おそらくほとんどの場合、現在得られているものよりも穏やかに失敗するでしょう。

ページの読み込み時に国の選択を確認することもできます。最初のオプションが選択されている場合は何もしません。それ以外の場合は、都市のドロップダウンを設定するために既に使用している ajax を呼び出します。コードの重複を避けるために、別の関数に入れてください。

$(document).ready(function() {
    // call ajax if country is selected
    if (document.getElementById('countries').selectedIndex != 0) {
        // call you ajax to populate cities
    }

id="countries"これは、国の選択ドロップダウンに追加することを前提としています。

ドロップダウンにidを追加することを強くお勧めします。一意のクラス名を中継して呼び出すと$('.city').html()、たまたま他の要素にもクラス名を追加した場合、誤って面白い結果が生じる可能性があります。

于 2013-03-23T10:19:21.310 に答える