dongshenjie3055 2015-07-24 02:41
浏览 40
已采纳

使用jquery的依赖下拉列表无法填充html文件

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

}
?>
  • 写回答

1条回答 默认 最新

  • doutang1884 2015-07-24 03:11
    关注

    Check the following things:

    1. the GET php calls are executed as expected
    2. 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 optionand it should work.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 spss统计中二分类变量和有序变量的相关性分析可以用kendall相关分析吗?
  • ¥15 拟通过pc下指令到安卓系统,如果追求响应速度,尽可能无延迟,是不是用安卓模拟器会优于实体的安卓手机?如果是,可以快多少毫秒?
  • ¥20 神经网络Sequential name=sequential, built=False
  • ¥16 Qphython 用xlrd读取excel报错
  • ¥15 单片机学习顺序问题!!
  • ¥15 ikuai客户端多拨vpn,重启总是有个别重拨不上
  • ¥20 关于#anlogic#sdram#的问题,如何解决?(关键词-performance)
  • ¥15 相敏解调 matlab
  • ¥15 求lingo代码和思路
  • ¥15 公交车和无人机协同运输