javascript - PHP 和 MySQL 中的动态下拉列表

标签 javascript php html mysql drop-down-menu

我的数据库中有两个表:

  • 表 1:Country => countryid(primary),countryname
  • 表 2:State => stateid(primary),countryid(foreign),state

现在我想制作一个下拉列表。例如:

  • 国家 India(下拉列表 1)应显示国家 GoaUPMP(下拉列表 2)
  • 国家 巴基斯坦(下拉列表 1)应显示国家 拉合尔卡拉奇(下拉列表 2)

我已经用这些值填充了两个表。

这里我包含了我的代码文件。我能够使第一个菜单正常工作,但第二个菜单中没有任何值。我希望第二个菜单在第一个菜单中选择的值发生更改时立即更改(而不仅仅是在加载页面时)。

index.php

<?php 
include('config.php'); 
$query_parent = mysql_query("SELECT * FROM country") or die("Query failed: ".mysql_error());

?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Dependent DropDown List</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#countryname").change(function() {
        $(this).after('<div id="loader"><img src="img/loading.gif" alt="loading subcategory" /></div>');
        $.get('loadsubcat.php?countryid=' + $(this).val(), function(data) {
            $("#stateid").html(data);
            $('#loader').slideUp(200, function() {
                $(this).remove();
            });
        }); 
    });

});
</script>
</head>

<body>
<form method="get">
    <label for="category">Parent Category</label>
    <select name="countryname" id="countryname">
        <?php while($row = mysql_fetch_array($query_parent)): ?>
        <option value="<?php echo $row['countryid']; ?>"><?php echo $row['countryname']; ?></option>
        <?php endwhile; ?>
    </select>
    <br/><br/>

    <label>Sub Category</label>
<select name="state" id="stateid"></select>
    </form>
</body>
</html>

config.php

<?php

mysql_connect('localhost', 'root', '');
mysql_select_db('login');

?>

loadsubcat.php

<?php     
include('config.php');

$countryid = $_GET['countryid'];

$query = mysql_query("SELECT * FROM state WHERE countryid = {$countryid}");
while($row = mysql_fetch_array($query)) {
    echo "<option value='$row['stateid']'>$row['state']</option>";
}

?>

我无法弄清楚我的问题。另外我以前没有做过PHP。这是我第一次学习这个项目,如果我犯了灾难性的错误,请原谅我。

最佳答案

在这里,您将发送带有键名 countryname 的国家 ID:

$.get('loadsubcat.php?countryname=' + $(this).val(), function(data) {

但是在您的 PHP 文件中,您试图通过使用 countryid 获取值:

$countryid = $_GET['countryid'];

改变并使两者相同。它会起作用的!

更新:

$("#state").html(data);

此处您指的是 state,但在您的 HTML 中,您使用的是 stateid

<select name="state" id="stateid"></select>

关于javascript - PHP 和 MySQL 中的动态下拉列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38084007/

相关文章:

html - IE7 BUTTON 白色轮廓

Android 停止建议词

javascript - 如何检测 HTML5 data-* 属性是否具有空字符串作为值?

php - Google 服务帐户权限/未找到文件错误

javascript - 点击事件触发多个文件窗口打开

php - 可以使用 Cron 作业来模拟 PHP 的多线程吗?

php - 显示/隐藏基于单选按钮的 WooCommerce 运费

c# - 从网络响应中获取 HTML 值

javascript在下一个动画之前等待动画完成

javascript - 我的 javascript 函数仅在我硬刷新页面后才起作用