我想创建一个注册表单,它的值将存储在数据库(mysql)中。 因为我希望数据格式正确(纽约而不是纽约时请求城市)我正在考虑使用下拉列表来限制选项。例如,当用户选择国家:英国时,第二个选择缩小到英国境内的城市并移除世界上其他城市。
我能用PHP / HTML / MYSQL知识做到这一点吗?或者我是否需要了解Javascript / Jquery等等?
提前致谢。
答案 0 :(得分:1)
最好的方法是使用jQuery(javascript)来管理与服务器的交互(这个过程称为AJAX)。
首先,jQuery只是一个javascript库,使得TONS更容易使用javascript。 Here是一篇有趣的文章,关于为什么jQuery绝对必要。但是,使用jQuery的两个主要原因是:(1)跨浏览器为您完成,(2)waaaaaay更少打字。以下是一些学习jQuery的免费资源:
theNewBoston.com
phpAcademy.org
接下来,使用jQuery时,必须首先加载jQuery库。之后,您可以输入jQuery命令而不是javascript,并且更容易发生魔术。在头标记中加载这样的库:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
最后,根据Select#1:
的结果,在此处查看填充选择#2答案 1 :(得分:0)
你只能使用PHP / HTML / MYSQL,但它会影响用户体验,因为你必须做这样的事情:
1)使用国家/地区下拉菜单显示当前表单。获取用户提交并发送回服务器(通过POST,PUT,GET)
2)接收用户输入,然后在第二个下拉菜单中显示已过滤的城市。现在,用户可以选择城市和POST到您的服务器。
答案 2 :(得分:0)
你可以用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
。
答案 3 :(得分:0)
您可以通过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);
}
})
})
我试图给你基本的想法。