Onchange根据值填充不同的下拉列表

时间:2017-07-13 14:23:41

标签: javascript php ajax forms dropdown

我选择第一个选项后尝试填充第二个下拉列表,第二个下拉菜单中没有任何内容。

我的第一个选择:

<select name="inst" class="form-control" required=""  id="inst">
    <option value=0 selected=1>Select...</option>
    <?php
        $sql="SELECT * FROM sapinst";
        $myData=mysqli_query($GLOBALS['con'],$sql);
        if (mysqli_num_rows($myData) > 0){
            while ($row = mysqli_fetch_array($myData))
            {
            echo '<option value="' .$row["nbd"]. '">' .$row["nome"]. '</option>';
            }
        }
        else{echo "No categories were found!";}
        ?>
</select>

我的第二个选择:

<select id= "sub" name="sub" class="form-control"></select>

我的剧本:

    <script type="text/javascript">
       $("#inst").change(function () {
        //get category value
        var cat_val = $("#inst").val();
        // put your ajax url here to fetch subcategory
        var url = '/ajax.php';
        // call subcategory ajax here
        $.ajax({
            type: "POST",
            url: url,
            data: {
                cat_val: cat_val
            },
            success: function (data)
            {
                $("#sub").html(data);
            }
        });
    });
</script>

我的Ajax.php文件:

<?php
    require_once 'edp/configdbedp.php';

    $prod_cat = $_POST['cat_val'];

    $sql    = "SELECT * FROM " . $dbname . ".sappainel WHERE nbd = '$prod_cat'";
    $result = mysqli_query($conn, $sql);
    $msg    = '';
    if (mysqli_num_rows($result) > 0) {
        while ($row = mysqli_fetch_array($result)) {
            $msg =. '<option value="' . $row["nome"] . '">' . $row["nome"] . '</option>';
        }
    } else {
        $msg .= "No categories were found!";
    }
    echo $msg;
    mysqli_close($conn);
?>

如果我尝试在Ajax php中打印一些东西,我就不能......似乎ajax.php不会运行。 我是否正确地称呼它?

2 个答案:

答案 0 :(得分:0)

您的第二个ajax被正确调用了吗? 检查控制台消息(在开发人员选项中,F12),查看ajax调用中的错误。

你可能想要这样做,因为cat_val都是一样的。它可能会出错。 -

data: {
    cat_val: cat_val_local //different variable names here.
},

另外"Select * from $TABLE_NAME(not @dbname)" 然后删除额外的。[dot] here - &gt; ".sappainel WHERE"

您还可以尝试将console.log()置于成功回调状态,并查看success是否返回任何元素。

success: function (data)
 {
      console.log(data);
      $("#sub").html(data);
 }

如果未显示任何内容,那么您的php可能是错误的。添加一个eror回调!像这样 -

error: function (e)
 {
      console.log(e);
 }

希望这有帮助。

答案 1 :(得分:0)

我已经解决了

对脚本的不满:

<script type="text/javascript">
                  $("#inst").change(function(){
                      //get category value
                      var cat_val = $("#inst").val();
                      // put your ajax url here to fetch subcategory
                      var url = 'ajax.php';
                      // call subcategory ajax here
                      $.ajax({
                                     type:"POST",
                                     url:url,
                                     data:{
                                         cat_val : cat_val
                                     },

                                     success:function(data)
                                      {
                                          $("#sub").html(data);
                                      }
                                  });
                  });
            </script>

在ajax.php上

<?php

require_once 'edp/configdbedp.php';

$prod_cat = $_POST["cat_val"];

$sql = "SELECT * FROM ".$dbname.".sappainel WHERE nbd = '$prod_cat'";
   $result = mysqli_query($GLOBALS['con'], $sql);
$msg ='';
    if (mysqli_num_rows($result) > 0){
        while ($row = mysqli_fetch_array($result))
        {
       $msg .='<option value="'. $row["nome"] .'">'. $row["nome"] .'</option>';
        }
    }
    else{$msg .="No categories were found!";}
    echo ($msg);
    mysqli_close($GLOBALS['con']);


?>