Javascript PHP和MySQL中的动态下拉列表_Javascript_Php_Html_Mysql_Drop Down Menu

Javascript PHP和MySQL中的动态下拉列表

javascript php html mysql drop-down-menu

Javascript PHP和MySQL中的动态下拉列表,javascript,php,html,mysql,drop-down-menu,Javascript,Php,Html,Mysql,Drop Down Menu,我的数据库中有两个表：表1:Country=>countryid（主）、countryname和表2:State=>stateid（主）、countryid（外国）、State 现在我想做一个下拉列表。例如：国家印度（下拉列表1）应显示国家果阿，向上和MP（下拉列表2）国家巴基斯坦（下拉列表1）应显示国家拉合尔和卡拉奇（下拉列表2）我用这些值填充了两个表这里我包括我的代码文件。我可以让第一个菜单工作，但第二个菜单中没有值。我希望第二个菜单在第一个菜单中选择的值更改时立即更改（

我的数据库中有两个表：

表1:

Country=>countryid（主）、countryname

和

表2:

State=>stateid（主）、countryid（外国）、State

现在我想做一个下拉列表。例如：

国家
```
印度
```
（下拉列表1）应显示国家
```
果阿
```
，
```
向上
```
和
```
MP
```
（下拉列表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>

<?php

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

?>

<?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>";
}

?>


相关下拉列表
$（文档）.ready（函数（）{
$（“#countryname”）.change（函数（）{
$（本）。在（''）之后；
$.get（'loadsubcat.php？countryid='+$（this.val（）），函数（数据）{
$（“#stateid”）.html（数据）；
$（'#loader'）.slideUp（200，function（）{
$（this.remove（）；
});
}); 
});
});
父类别



子类别

config.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>

<?php

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

?>

<?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>";
}

?>

loadsubcat.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>

<?php

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

?>

<?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>";
}

?>

在这里，您将发送带有关键字名称的国家idcountryname
：
$.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>

在这里，您将发送带有关键字名称的国家idcountryname
：
$.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>

穆罕默德·苏蒙·莫拉·塞利姆所说的是正确的，loadsubcat.php中还有一个错误
你需要改变，重复选项声明
发件人：
echo“$row['state']”；

致：
echo“$row['statename']”；

然后，第二个下拉列表将根据国家的变化下拉列表获得国家
当我在本地机器上执行你的代码时，我没有得到数据。您所犯的错误是没有正确地包含字符串和变量
 穆罕默德·苏蒙·莫拉·塞利姆所说的是正确的，loadsubcat.php中还有一个错误
你需要改变，重复选项声明
发件人：
echo“$row['state']”；

致：
echo“$row['statename']”；

然后，第二个下拉列表将根据国家的变化下拉列表获得国家
当我在本地机器上执行你的代码时，我没有得到数据。您所犯的错误是没有正确地包含字符串和变量
 您可能需要研究ajaxcall@j.Doe你能详细解释一下吗？请看这里。我想这对你有用@j.Doe实际上我可以做这件事，从列表中选择一个选项并显示其信息，我无法获取菜单2列表，您可能需要查看ajaxcall@j.Doe你能详细解释一下吗？请看这里。我想这对你有用@j.Doe实际上我可以做这件事，从列表中选择一个选项并显示它的信息，我无法获得菜单2列表，那么我应该做什么更改？我做了，但outputchange$（“#state”）.html（数据）没有改变
到$（“#stateid”）.html（数据）控制台上显示了什么或输出了什么？在第二个菜单中没有显示任何选项，这就是问题所在。我可以上传一个文件并与您共享吗？那么我应该更改什么？我做了，但outputchange$（“#state”）.html（数据）没有改变
到$（“#stateid”）.html（数据）控制台上显示了什么或输出了什么？在第二个菜单中没有显示任何选项，这就是问题所在。我可以上传一个文件并与您共享吗？它是否在您的系统上正确运行？因为在我的系统中，第二个下拉列表中没有选项。并且没有诸如“statename”之类的属性。它是唯一一个有州名的州。嘿@ArnavRay，是的，它在我的系统中正确运行。在第一个下拉列表中，我得到了第二个下拉列表的选项，在我的数据库表中，我将“stateasstatename”命名为“statename”，但这不是一个大问题。由于错误的字符串表示，loadsubcat.php显示错误，这就是原因，即使jQuery Ajax请求发送成功，由于php中的错误，您也无法返回数据。就这样。我希望上述解决方案对您有效：-）它在您的系统上正确运行了吗？因为在我的系统中，第二个下拉列表中没有选项。并且没有诸如“statename”之类的属性。它是唯一具有状态名称的状态。嘿@ArnavRay，是的，它在我的系统中正确运行了。在第一个下拉列表中，我得到了第二个下拉列表的选项，在我的数据库表中，我将“stateasstatename”命名为“statename”，但这不是一个大问题。由于错误的字符串表示，loadsubcat.php显示错误，这就是原因，即使jQuery Ajax请求发送成功，由于php中的错误，您也无法返回数据。就这样。我希望上述解决方案对您有效：-）