javascript - JSON 不适用于 OnChange 事件

Question

我最初编写这段代码是为了带回单个数据点。我意识到我需要通过 onchange 事件(下拉选择)返回更多字段，并将其更改为使用 JSON。它不返回任何数据。首次加载页面时，下拉列表是通过 PHP 动态构建的。我对此很陌生，因此我们将不胜感激。

下拉代码:

<p id="dropdown"   style="DISPLAY: none" >
        <?php
            $query = "call test.spsMSTR_AllCatListBuild";
            $stmt = $conn->query( $query );

            $dropdown = "<select id='catlist' name='catlist' onchange='getval(this);'>";
                $dropdown .= "\r\n<option value= 'NA'>Select Category</option>";
                foreach ($stmt as $row) {
                  $dropdown .= "\r\n<option value='{$row['ID']}'>{$row['RPT_NAME']}</option>";
                }

                $dropdown .= "\r\n</select>";
                echo $dropdown;
                $conn = null;
        ?>
    </p>

Ajax/JSON 代码:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script id="source" language="javascript" type="text/javascript">

       $(document).ready(function(){
            $("#catlist").change(function(){
            var vid = document.getElementById("catlist").value;

            $.getjson("ajax.php",
            {catid:vid},
            function(result){
                alert(result); }
                .error(function(xhr) {
                    alert(xhr)
                })
                ; )
        })})

  </script>

PHP 代码:

<?php include('./DBConfig.php'); ?>
<?php

    $vid = $_GET["catid"];
    $query =  "SELECT RPT_NAME, ACTIVE FROM test.MSTR_REPORT_MASTER WHERE ID = $vid" ;
    $stmt = $conn->query( $query );
    //$result = $stmt->fetchColumn();
    $result = $stmt->fetch(PDO::FETCH_ASSOC);
    echo json_encode($result);
?>

Answer 1

所以，我已经纠正了您的错误，您应该拥有以下内容才能正常工作，除非有其他原因导致错误。

<select id='catlist' name='catlist'>
    <option value='NA'>Select Category</option>
    <option value='id1'>val1</option>
    <option value='id2'>val2</option>
    <option value='id3'>val3</option>
</select>

$(function(){
    $("#catlist").change(function() {
        var sVal = $(this).val();
        if (sVal !== "NA") { // I am assuming you don't want to make an ajax call when the value is 'NA'!
            $.getJSON("ajax.php", {catid: $(this).val()}, function(result) {
                alert(result); 
            });
            //by the way $(this).val() = id1|id2|id3
        }
    });
});