Javascript 第二个下拉选择与第一个下拉选择上的选择相关_Javascript_Php_Jquery_Html_Mysql

Javascript 第二个下拉选择与第一个下拉选择上的选择相关

javascript php jquery html mysql

Javascript 第二个下拉选择与第一个下拉选择上的选择相关,javascript,php,jquery,html,mysql,Javascript,Php,Jquery,Html,Mysql,我想创建一个注册表单，它的值将存储在数据库（mysql）中。因为我希望数据的格式正确（在询问城市时，是纽约而不是纽约），所以我考虑使用下拉列表限制选项。例如，当用户选择“作为国家：英国”时，第二个选择将缩小到英国境内的城市，并删除世界其他城市我可以只用PHP/HTML/MYSQL知识来做这件事吗？或者我需要了解Javascript/Jquery和更多吗提前感谢。您可以只使用PHP/HTML/MYSQL，但这会影响用户体验，因为您必须执行以下操作： $sql = "select * from

我想创建一个注册表单，它的值将存储在数据库（mysql）中。因为我希望数据的格式正确（在询问城市时，是纽约而不是纽约），所以我考虑使用下拉列表限制选项。例如，当用户选择“作为国家：英国”时，第二个选择将缩小到英国境内的城市，并删除世界其他城市

我可以只用PHP/HTML/MYSQL知识来做这件事吗？或者我需要了解Javascript/Jquery和更多吗

提前感谢。

您可以只使用PHP/HTML/MYSQL，但这会影响用户体验，因为您必须执行以下操作：

$sql = "select * from country";
$result = //execute your query and fetch array

$("#your_dropdown_id").change(function(){
     $.ajax({
        url: "ajax.php?id="+$(this).val(),
        success: function(data) {
            $("#second_dropdown_id").html(data);
        }
    })
})

1）使用国家/地区下拉菜单显示表单。获取用户提交并发送回服务器（通过POST、PUT、get）

2）接收用户输入，然后在第二个下拉菜单中显示过滤后的城市。现在，用户可以选择城市并发布到您的服务器

您可以使用PHP实现，但不能使用动态。人们必须先选择英国，然后按submit，然后选择一个城市

但是，您可以动态地执行此操作。您可以使用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>

在

getcities.php

中，您将获得所有相关的城市，并将它们输出为

city\u name您可以通过jquery ajax轻松地完成这项工作
第一个填充国家/地区的下拉列表，如下所示：
$sql = "select * from country";
$result = //execute your query and fetch array

$("#your_dropdown_id").change(function(){
     $.ajax({
        url: "ajax.php?id="+$(this).val(),
        success: function(data) {
            $("#second_dropdown_id").html(data);
        }
    })
})

通过$result
和内部循环运行一个循环
echo "<option value=".$row['id'].">".$row['name']."</option>";

我试着给你一个基本的想法
详情见:
最好的方法是使用jQuery（javascript）来管理与服务器的交互（这个过程称为AJAX）
首先，jQuery只是一个javascript库，它使javascript的使用更加容易。这是一篇关于为什么jQuery是绝对必要的有趣文章。然而，使用jQuery的两个主要原因是：（1）跨浏览器已经为您完成，以及（2）WAAAAAAAAAAY更少的键入。以下是一些学习jQuery的免费资源：



接下来，在使用jQuery时，必须首先加载jQuery库。之后，您可以键入jQuery命令而不是javascript，这样就更容易实现许多魔术。按如下方式加载库，在头部标记中：
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>



最后，在这里查看根据Select#1的结果填充Select#2：

您需要Javascript/jQuery您需要使用Javascript/jqueryNo调用ajax，您不需要Javascript/jQuery。它可以用普通的PHP来完成，所以我想我必须学习JavaScript/ajax/jquery，以便正确地构建它，并且对用户友好。您是否建议学习任何书籍？如果您希望根据用户选择的国家/地区动态加载城市，然后仅向服务器提交一次用户响应，则选择“是”。