我有一个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>
这里的代码:
<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>';
}
}
?>
因为,在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!')
}
});
});
});
确保张贴的id是有效的。您可以在Mozilla上使用firebug查看相同的内容,如果id正确则-
使用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);
}
});
});
});
正如我在评论中提到的,快速解决方案是验证客户端,以防止表单在无效时发布。这样就不会丢失从服务器检索到的城市名称。这不是万无一失的,但在大多数情况下,可能会比你现在得到的失败得更温和。
您还可以在页面加载时检查国家选择。如果选择了第一个选项,则不执行任何操作,否则调用已经用于填充城市下拉列表的ajax。把它放在一个单独的函数中,以避免代码重复。
$(document).ready(function() {
// call ajax if country is selected
if (document.getElementById('countries').selectedIndex != 0) {
// call you ajax to populate cities
}
假设您将id="countries"
添加到国家选择下拉列表中。
$('.city').html()
可能会意外地给您带来一些有趣的结果。