jQuery/ajax 的 HTML 表单选择问题答案

【问题标题】：Html form selected issue with jQuery/ajaxjQuery/ajax 的 HTML 表单选择问题
【发布时间】：2013-03-23 09:35:44
【问题描述】：

我有一个 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>';
    } 
}
?>

【问题讨论】：

考虑验证输入客户端，您将在发布到服务器之前捕获无效字段，因此无需重新加载页面。话虽如此，您可能仍希望保留服务器验证以防止 get/post 操作。

标签： php jquery mysql ajax

【解决方案1】：

因为，在您的 AJAX 请求中，您将数据定义为 POST，并且您在需要 JSON 映射的地方提供 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!')
            }
        });

    });
});

【讨论】：

也许你有几个问题，当然是一个。控制台 (F12) 中是否有任何错误？您是否在 ajax 调用的成功回调中检索某些内容？
国家检索成功
data : {id: myId, city : $("#city option:selected").text()}, 可能是您的答案中缺少的部分。
stackoverflow.com/questions/1643227/…

【解决方案2】：

确保发布的 ID 有效。如果 id 是正确的，你可以在 Mozilla 上使用 firebug 来查看相同的内容-

在成功函数中使用 append() 函数而不是 html()-

$(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);
            }
        });

    });
});

【讨论】：

【解决方案3】：

正如我在评论中提到的，快速解决方法是验证客户端以防止表单在无效时发布。这样您就不会丢失从服务器检索到的城市名称。这不是万无一失的，但在大多数情况下，它可能会比你现在得到的失败更温和。

您还可以在页面加载时检查国家/地区选择。如果选择了第一个选项，你什么都不做，否则调用你已经用来填充城市下拉列表的 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() 可能会意外地给你一些有趣的结果，如果你碰巧也将类名添加到其他元素。

【讨论】：