我想创建一个注册表单，它的值将存储在数据库 (mysql) 中。 因为我希望数据采用正确的格式（询问城市时是纽约而不是纽约），所以我正在考虑使用下拉列表限制选项。例如，当用户选择 Country: UK 时，第二个选择将缩小到英国境内的城市并删除世界其他城市。
我可以只用 PHP/HTML/MYSQL 知识做到这一点吗？还是我需要了解 Javascript/Jquery 等等？
提前致谢。
【问题讨论】：
标签： javascript php jquery html mysql
你可以只用 PHP/HTML/MYSQL 来做，但是，它会影响用户体验，因为你必须做这样的事情：
1) 带有国家下拉菜单的表单。获取用户提交并发送回服务器（通过 POST、PUT、GET）
2) 接收用户输入，然后在第二个下拉菜单中显示过滤后的城市。现在用户可以选择城市并发布到您的服务器。
【讨论】：
你可以用 PHP 来做，但不是动态的。人们必须先选择英国，然后按提交，然后继续选择一个城市。
但是，您可以动态进行。您可以使用 Ajax 正确执行此操作：
HTML：
<select name="country" id="country" onchange="getCities(this.value)">
<option>Brazil</option>
<option>United Kingdom</option>
</select>
<select name="city" id="city">
<option disabled selected>Please select a country first</option
</select>
Javascript：
function getCities(str) {
if (str=="") {
document.getElementById("city").innerHTML="";
return;
} if(window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
} xmlhttp.onreadystatechange=function() {
if(xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("hat").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getcities.php?q="+str,true);
xmlhttp.send();
}
在getcities.php 中，您将获得所有相关城市，并将它们输出为<option>city_name</option。
【讨论】：
你可以通过 jquery ajax 轻松做到。
首先为这样的国家/地区填充下拉列表：
$sql = "select * from country";
$result = //execute your query and fetch array
通过$result 和内部循环运行一个循环
echo "<option value=".$row['id'].">".$row['name']."</option>";
之后你需要像这样调用 ajax 来改变这个下拉列表：
$("#your_dropdown_id").change(function(){
$.ajax({
url: "ajax.php?id="+$(this).val(),
success: function(data) {
$("#second_dropdown_id").html(data);
}
})
})
我试图给你基本的想法。
【讨论】：
最好的方法是使用 jQuery (javascript) 来管理与服务器的交互（这个过程称为 AJAX）。
首先，jQuery 只是一个 javascript 库，它使使用 javascript 变得更容易。 Here 是一篇关于为什么 jQuery 绝对必要的有趣文章。然而，使用 jQuery 的两个主要原因是：(1) 为您完成了跨浏览器，以及 (2) waaaaaay 少打字。以下是学习 jQuery 的一些很棒的免费资源：
theNewBoston.com
phpAcademy.org
接下来，在使用 jQuery 时，必须先加载 jQuery 库。之后，您可以键入 jQuery 命令而不是 javascript，并且更容易发生许多魔术。像这样在你的 head 标签中加载库：
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
最后，在此处查找基于 Select #1 的结果填充 Select #2：
【讨论】：