显示数据下拉列表从另一个文件(php,mysql,javascript)


Display data in dropdown lists from another file (php,mysql,javascript)

我用javascript得到了多个数据库下拉列表,我想在下拉菜单中显示结果。但此时此刻,什么也看不出来。它显示地区(下拉菜单),但不显示国家(下拉菜单)

我的核心代码(我想在国家下拉菜单中显示结果):

<html>
<body>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
function abc(){
        var e = document.getElementById("Region_ID");
        var val = e.options[e.selectedIndex].value;
        $.post("getSecondDropDown.php",{ Region_ID:val}, function( data ) {
        $("#Country_ID").html(data);
    });
 }
 </script>

<form action="/NewService.php" id="ServiceForm" method="post">
  Name:<input type="text" name="Service_Name"></br>
  Region: <select name="Region_ID" id="Region_ID" onchange="abc()" form="ServiceForm">
 <?php
include('config.php');
try {
    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $stmt = $conn->prepare("SELECT Region_ID, Region_Name FROM Regions"); 
    $stmt->execute();
    $result = $stmt->setFetchMode(PDO::FETCH_ASSOC); 
    foreach($stmt as $v) { 
    echo "<option value='" . $v['Region_ID'] ."'>" . $v['Region_Name'] ."</option>";
}
}
catch(PDOException $e) {
    echo "Error: " . $e->getMessage();
}
$conn = null;
?>
</select></br>

Country: <select name="Country_ID" form="ServiceForm">
<script>document.write($("#Country_ID"))</script>
</select></br>

  <input type="submit">
</form>
</body>
</html>

第二个php文件(getSecondDropDownMenu.php):

<?php
    $Region_ID =$_POST['Region_ID'];
    $option="";
              try {
    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $stmt = $conn->prepare("SELECT Country_ID, Country_Name FROM Countries WHERE Region_ID ='$Region_ID'"); 
    $stmt->execute();
    $result = $stmt->setFetchMode(PDO::FETCH_ASSOC); 
    foreach($stmt as $v) { 
    echo "<option value='" . $v['Country_ID'] ."'>" . $v['Country_Name'] ."</option>";
}
        echo $option;
  ?>

我想问题就在这里,但我不太清楚:

Country: <select name="Country_ID" form="ServiceForm">
<script>document.write($("#Country_ID"))</script>
</select></br>

在第二个文件(getSecondDropDownMenu)中,你需要创建一个函数

<?php
function functionName(){
$Region_ID =$_POST['Region_ID'];
$option[] = null;
          try {
$conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$stmt = $conn->prepare("SELECT Country_ID, Country_Name FROM Countries WHERE Region_ID ='$Region_ID'"); 
$stmt->execute();
$result = $stmt->setFetchMode(PDO::FETCH_ASSOC); 
foreach($stmt as $v) { 
array_push($option,  "<option value='" . $v['Country_ID'] ."'>" . $v['Country_Name'] ."</option>");
     }
  return option;
  }
?>

然后在另一个文件中包含它包括(getSecondDropDownMenu.php);

和do

$arrayForSecondDropdown[] = functionName();

,然后像

一样执行foreach
 foreach($arrayForSecondDropdown as $v){
      echo $v;
}

您可以通过使用onchange='abc(this.value)'调用abc函数来简化它,并且目标下拉列表需要一个ID属性来启用回调以添加html数据。此外,由于您没有向sql语句传递任何变量,因此您并不真正需要准备好的语句,因此简单的query应该足够了。

<html>
    <head>
        <title>dependant select menu</title>
        <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
        <script type="text/javascript">
            function abc( value ){
                    $.post("getSecondDropDown.php",{ Region_ID:value }, function( data ) {
                        $("#Country_ID").html( data );
                    }
                );
             }
         </script>      
    </head>
    <body>
        <form action="/NewService.php" id="ServiceForm" method="post">
          Name:<input type="text" name="Service_Name"></br>
          Region: <select name="Region_ID" id="Region_ID" onchange="abc( this.value )" form="ServiceForm">
             <?php
                include('config.php');
                try {
                    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
                    $conn->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );
                    $stmt = $conn->prepare( "SELECT Region_ID, Region_Name FROM Regions" ); 
                    $stmt->execute();
                    $result = $stmt->setFetchMode( PDO::FETCH_ASSOC ); 
                    foreach($stmt as $v) { 
                        echo "<option value='" . $v['Region_ID'] ."'>" . $v['Region_Name'] ."</option>";
                    }
                } catch(PDOException $e) {
                    echo "Error: " . $e->getMessage();
                }
                $conn = null;
            ?>
            </select>
            </br>
            Country: <select id='Country_ID' name="Country_ID" form="ServiceForm"></select>
            </br>
            <input type="submit">
        </form>
    </body>
</html>

我认为你错过了配置文件,包括在你的第二个php文件(getSecondDropDownMenu.php):所以这个脚本不能运行。为什么发生这种情况意味着这个页面能够获得数据库连接 .你正在根据地区从数据库中获取国家列表,所以这里没有实现数据库连接。所以请包含config.php,然后再试一次。此外,您还在连接php变量与字符串 . ie中的国家获取查询中犯了另一个错误,您应该使用正确的语法连接区域变量。请参阅下面的代码。

第二个php文件(getSecondDropDownMenu.php):

<?php
    include('config.php');
    $Region_ID =$_POST['Region_ID'];
    $option="";
              try {
    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $stmt = $conn->prepare("SELECT Country_ID, Country_Name FROM Countries WHERE Region_ID ='".$Region_ID."'"); 
    $stmt->execute();
    $result = $stmt->setFetchMode(PDO::FETCH_ASSOC); 
    foreach($stmt as $v) { 
    echo "<option value='" . $v['Country_ID'] ."'>" . $v['Country_Name'] ."</option>";
}
        echo $option;
  ?>

我想这可能对你有帮助。

您已经编写了代码以在选择标签的ID的帮助下显示,但是您还没有为select tag提供任何ID

<script>document.write($("#Country_ID"))</script>

根据您提供的脚本,您必须为select标记添加ID Attribute

我建议不要使用document.write,特别是在页面加载之后。它会导致意想不到的结果。请使用以下方法:

尝试替换为:

document.getElementById('Country_ID').innerHTML = "something important";

然而,如果你不愿意替换整个innerHTML,你可以添加一些东西:

document.getElementById('Country_ID').insertAdjacentHTML('beforeend', "something added");