第二个下拉选项与第一个下拉选择中的选择相关

时间:2014-01-11 19:04:39

标签: javascript php jquery html mysql

我想创建一个注册表单,它的值将存储在数据库(mysql)中。 因为我希望数据格式正确(纽约而不是纽约时请求城市)我正在考虑使用下拉列表来限制选项。例如,当用户选择国家:英国时,第二个选择缩小到英国境内的城市并移除世界上其他城市。

我能用PHP / HTML / MYSQL知识做到这一点吗?或者我是否需要了解Javascript / Jquery等等?

提前致谢。

4 个答案:

答案 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

Populate Select2 based on Select1, from MySQL DB

Populate dropdown 2 based on selection in dropdown 1

答案 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);
        }
    })
})

我试图给你基本的想法。

查看详情:http://www.appelsiini.net/2010/jquery-chained-selects

How to make cascading drop-down lists using mysql and php