如何根据第一个选项选择第二个选项（两个选项都来自数据库）

Question

大家好，我是 php 和 javascript 的新手...这是相互链接的数据库...

下面是我用来调用第一个表的代码

<label for="negeri">Negeri</label>
     <select name="kod_negeri" id="kod_negeri" class="form-control">
            <option selected value="00">Sila Pilih Negeri</option>
                            <?php
                            require_once '../SBDB.php';
                            $sql_run = mysqli_query($link, "SELECT * FROM sbhb07");
                            if (mysqli_num_rows($sql_run) > 0) {
                                while ($row = mysqli_fetch_array($sql_run)) {
                                    ?>
                                    <option value="<?php echo $row['SBHB07_02']; ?>"><?php echo $row['SBHB07_02']; ?> 
                                        <?php echo $row['SBHB07_03']; ?></option>
                                    <?php
                                }
                            }
                            ?> 
                        </select>

下面是根据上面代码会改变的select标签...它会从第二张表中调用数据...这两张表的链接是SBHB07_02和SBHB08_02

<div class="col-lg-4 col-auto">
                        <label for="daerah">Daerah</label>
                        <select name="daerah" id="daerah" class="form-control">
                             <option selected value="00">Sila Pilih Daerah</option>
                        </select>
                    </div>

下面是我尝试做的 javascript...我需要帮助，因为我不完全理解 Javascript 和 JQuery，因为我知道这个问题需要两者。

Answer 1

你快到了，伙计。 确保 jquery 文件在您的应用程序中； 每次需要从服务器端脚本获取数据时，将此 jquery 文件插入单独的 js 文件，以将您的应用程序连接到服务器端 php 脚本；

function SendByAjax(qrydata,urllink){
$.ajax({
crossOrigin: true,
type: "POST",
url: urllink,
data: qrydata,
cache: false,
success: function(html){
    res = html.split("|||");
    html = res[0];
    
    if (html == 'Get2ndOpts'){
        $("#daerah").html(res[1]);  //update second select with new options     
    }else{
        //other things
    }       
},error: function(jqXHR, textStatus, errorThrown){
        alert("Operation failed");
    }  
}); }

更新您的第一个选择标签 在第一个选择标签中包含 onChange；

<select name="kod_negeri" id="kod_negeri" class="form-control" onChange="SendByAjax('id='+this.value+'&dwat=get2ndOptVals','myprocess.php');">

可选：在页面的末尾，您还可以在第一个选择标签中加载带有第一个值的第二个选择标签； 像这样;

var FirstSelVal = $('#kod_negeri').value();
SendByAjax('id='+FirstSelVal+'&dwat=get2ndOptVals','myprocess.php');

最后创建 myprocess.php 文件创建 myprocess.php 文件或任何用于处理请求的 php 文件（连接到数据库）；

//your database connection file
required(database.php);
if($_REQUEST["dwat"] == "get2ndOptVals"){
$qry = mysqli_query($link,"SELECT * FROM sbhb08 WHERE SBHB08_02 ='".mysqli_escape_string($link,$_REQUEST["id"])."'");
if(mysqli_num_rows($qry) > 0){
while ($rs = mysqli_fetch_array($qry)) {
$opts .= '<option value="'.$rs["SBHB08_03"].'">'.$rs["SBHB08_04"].'</option>';
}
echo 'Get2ndOpts|||'.$opts;
}
}

说明：这是我用来处理多个 javascript、ajax、php 请求和响应的。 除了选择选项之外，您还可以更新它以执行更多操作

Answer 2

首先获取您的第二个选择，然后对您的第一个选择使用 onchange 功能。 然后获取 first select 的值然后创建一个条件。 然后将该值存储到第二个选择中。 就像下面这样：

var sec = document.getElementById('secondSelect');

document.getElementById('kod_negeri').onchange = function() {
  var value1 = document.getElementById('kod_negeri').value;
  if(value1 == 'condition'){
    sec.value = 'the value';
 }
}

Answer 3

SQL 查询应该是：

SELECT sbhb08.SBHB08_04
FROM sbhb07 INNER JOIN sbhb08 ON sbhb07.SBHB07_02 = sbhb08.SBHB08_02
WHERE sbhb08.SBHB08_02 = [value_selected_with_first_select];

您可以使用以下 JavaScript 代码检索所选值：

let selectedNegeri = document.querySelector('#kod_negeri').value;
document.querySelector('#kod_negeri').addEventListener('change', (event) => {
    selectedNegeri = event.target.value;
});

无论如何，您不能直接将变量从 JavaScript 传递到 PHP （反之亦然），因此您必须使用以下方法之一：

1. 您在第一个<select>之后提交表单并从$_POST读取所选值以填充第二个<select> （这将触发页面重新加载）
2. 您创建的 AJAX 请求类似于此处的解释： https : //www.w3schools.com/php/php_ajax_database.asp