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

Question

Hi guys I'm new to php and javascript... This is the database that link with each other...

Below are the code I use to call the first table

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

Below are the select tag that will change according to the above code... It will call data from the second table... The link of this two table is SBHB07_02 and 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>

Below are the javascript that I try to do... I need help as I'm not fully understand Javascript and JQuery as I know this problem need both.

Answer 1

You are almost there guy. make sure jquery file is in your application; insert this jquery file into seperate js file to connect your application to server-side php script everytime you need to get data from server-side script;

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

UPDATE YOUR FIRST SELECT TAG Include onChange in the first select tag;

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

Optional: At the end of the page, you can also load second select tag with first value in first select tag; like this;

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

LASTLY CREATE YOUR myprocess.php File Create myprocess.php file or any php file you are using to process request (connected to database);

//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;
}
}

Explanation: This is what I use to process multiple javascript, ajax, php request and response. You can update it to perform more operations, apart from select options stuff

Answer 2

First fetch your 2nd select, then use onchange function for your first select. Then get the value of first select then make a condition. Then store the value into the second select. Just like the following:

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

The SQL query should be:

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];

You can retrieve the value selected with the following JavaScript code:

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

Anyway you cannot directly pass variables from JavaScript to PHP (and vice-versa) therefore you will have to use one of the following approaches:

1. You submit the form after the first <select> and read the selected value from $_POST in order to populate the second <select> (this will trigger a page reload)
2. You create an AJAX request similarly to how it is explained here: https://www.w3schools.com/php/php_ajax_database.asp