Dependent dropdown list using jquery cannot populate html file

Question

I have two drop-down lists where the second depends on the first drop-down list selection.

I've tested getSalary and getamount and it can fetch the array but cannot be loaded to try.php .
What could have gone wrong? Here are my codes.

try.php:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="jquery-1.11.3.min.js"></script>
<script src="jquery-ui.js"></script>
<script src="script.js"></script>
</head>

<body>
Grade and Increment
<select name="salaryid"  id="salaryid" ></select>
<br>  

Salary Amount:
<select name="salaryamt"  id="salaryamt" ></select>

</body>
</html>

script.js:

$(document).ready(function () {
    $.getJSON("getSalary.php", success = function(data) {
        var options = "";
        for (var i = 0; i < data.length; i++)
        {
            options += "<options value='" + data[i].toLowerCase() + "'>" + data[i] + "</options>";
        }

        $("#salaryid").append(options);
        $("#salaryid").change();

    });

    $("#salaryid").change(function(){
        $.getJSON("getAmount.php?make=" + $(this).val(), success = function(data) {
            var options = "";
            for (var i = 0; i < data.length; i++)
            {
                options += "<options value='" + data[i].toLowerCase() + "'>" + data[i] + "</options>";
            }
            $("#salaryamt").html("");
            $("#salaryamt").append(options);
        });
    });
});

getSalary.php

<?php
include 'pmis_conn.php';

$qrysal = mysql_query("Select grade_incre from salary_ref where year = '2012'") or die(mysql_error());

$makes = array();

while($row = mysql_fetch_array($qrysal))
{
    array_push($makes, $row['grade_incre']);
}
echo json_encode($makes);
?>

getamount.php

<?php
if (isset($_GET["make"])) {
    include 'pmis_conn.php';

    $make = $_GET["make"];

    $qrysal = mysql_query("Select amount, year from salary_ref where grade_incre like '{$make}'") or die(mysql_error());

    $amount = array();

    while($row = mysql_fetch_array($qrysal))
    {
        //$amt = $row['amount'] + "-" + $row['year']
        array_push($amount, $row['amount']);
    }
    echo json_encode($amount);

}
?>

Answer 1

Check the following things:

the GET php calls are executed as expected
the javascript is triggered as expected

Debug the GET calls:

For debugging try to use in Chrome the Developer tools Ctrl+shift+I . In there check the Network tab to see what's going on with your ajax call.

Here the manual: https://developer.chrome.com/devtools
here a tutorial: http://discover-devtools.codeschool.com/

Debug the javascript:

Alvways from the Developer tools go on Source and put some break points on script.js .

Here the manual for debug js: https://developer.chrome.com/devtools/docs/javascript-debugging

Additional issue in the javascript:

As you can see here https://jsfiddle.net/86vjfwLe/3/ your $(this).val() is null. You should try this method instead : jQuery get value of select onChange .

Additional issues with the html and on change:
The html you are injecting is broken. You have to replace options to option and it should work.

Dependent dropdown list using jquery cannot populate html file

Question

1 answers

solution1
0 ACCPTED 2015-07-24 03:11:18

Dependent dropdown list using jquery cannot populate html file

Question

1 answers

solution1 0 ACCPTED 2015-07-24 03:11:18

solution1
0 ACCPTED 2015-07-24 03:11:18