下拉使用jquery和sql更新另一个下拉列表

Question

How can I update another dropdown with jquery with sql. It means from database.

  $('#typeOfGlass').on('change', function(){
   console.log($('#typeOfGlass').val());
    $('#glassWidth').html('');
    if($('#typeOfGlass').val()==15){
        $('#glassWidth').append('<option value="19">19</option>');
        $('#glassWidth').append('<option value="20">20</option>');
        $('#glassWidth').append('<option value="21">21</option>');
    }else{
        $('#glassWidth').append('<option value="6">6</option>');
        $('#glassWidth').append('<option value="7">7</option>');
        $('#glassWidth').append('<option value="8">8</option>');
        $('#glassWidth').append('<option value="9">9</option>');
    }
});

I use this one but i dont have idea how to make it from database.

$sqlq="SELECT DISTINCT daerah FROM kampung WHERE negeri='$negeri'";
    $result_set=mysqli_query($conn, $sqlq);
    while($row=mysqli_fetch_array($result_set, MYSQLI_ASSOC))
    {
        echo "<option value=".$row['daerah'].">".$row['daerah']."</option>";
    }

Any idea?

Answer 1

The first thing you need to do is to change the query or add info to your table so the program has a way to find out whether or not to append a specific <option> to the <select>.

Next, fetch all rows into an array. This should work, but I didn't test it:

$rows = array();
while ($rows[] = mysqli_fetch_array($result_set, MYSQLI_ASSOC));

Now pass this data to JavaScript:

echo "<script> var data = " . json_encode($rows) . "; </script>";

Finally, when #typeOfGlass is changed, clear #glassWidth, then iterate over data and append only the relevant elements, depending on #typeOfGlass's value.