I am new to coding and I am working on my first project. I am trying hard to create a 4-tier-dependent dropdown list to find parts by vehicle trim.
After creating the first two dropdowns, I ran my project and discovered that the model dropdown is not populated based on the first dropdown. The getMakes.php and getModels.php codes work. I guess the problem is with the script.js I have looked through over and over and over and I can't seem to get the problem. Please I will appreciate any advice that helps me get over this hurdle. Here is what I have so far:
My form dropdowns:
<div id = "banner">
<select id = "slct1"></select>
<select id = "slct2"></select>
<select id = "slct3"></select>
<select id = "slct4"></select>
</div>
<script src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src = "script.js"></script>
config.php:
<?php
$username = "root";
$password = "";
$host = "localhost";
$database = "testing";
?>
opendb.php:
<?php
require "config.php";
$conn = mysqli_connect($host, $username, $password) or
die("Could not connect");
mysqli_select_db($conn, $database);
?>
closedb.php:
<?php
mysqli_close($conn);
?>
getMakes.php:
<?php
require "opendb.php";
$query = "SELECT name FROM `makes`";
$data = mysqli_query($conn, $query) or die("Error: ".mysqli_error($conn));
$makes = array ();
while ($row = mysqli_fetch_array ($data)) {
array_push($makes, $row["name"]);
}
echo json_encode($makes);
require "closedb.php";
?>
getModels.php:
<?php
if(isset($_GET["make"])){
$make = $_GET["make"];
require "opendb.php";
$query = "SELECT models.name FROM `models`
INNER JOIN makes ON models.make_id=makes.id
WHERE makes.name LIKE '{$make}'";
$data = mysqli_query($conn, $query);
$models = array ();
while ($row = mysqli_fetch_array ($data)) {
array_push($models, $row["name"]);
}
echo json_encode($models);
require "closedb.php";
}
?>
script.js:
$(document).ready(function(){
$.getJSON("getMakes.php", success = function(data){
var options = "";
for( var i = 0; i < data.length; i++) {
options+= "<option value='" + data[i].toLowerCase() + "'>"+ data[i]+"</option>";
}
$("#slct1").append(options);
$("#slct1").change();
});
$("#slct1").change(function(){
$.getJSON("getModels.php?make =" + $(this).val(),
success = function(data){
var options = "";
for( var i = 0; i < data.length; i++){
options+= "<option value='" + data[i].toLowerCase() + "'>"+ data[i] + "</option>";
}
$("#slct2").html("");
$("#slct2").append(options);
});
});
});
Aucun commentaire:
Enregistrer un commentaire