Json Ajax导致html选项

时间:2017-05-09 12:43:19

标签: php jquery json ajax

查看代码我有:文件一显示数据两个选择框第二个选择框depand第一个选择框值

    <?php
    $con=mysql_connect("localhost","root","root");
    mysql_select_db("register",$con);
    ?>
    <!DOCTYPE html>
    <html>
    <head>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
     <script type="text/javascript">

        $(document).ready(function(){

            $("#category").change(function(){
             var value=$("#category option:selected").val();
             $.ajax({
                      type:'post',
                      url:'subcat.php',
                      data:{ kvalue : value },
                       datatype:'json',
                      success:function(data){
                        alert(data);
                        $("#response").html(data);
                      }

             })
        })
        })
     </script>
        <title></title>
    </head>
    <body>
    <form method="post">
        <table>
            <tr>
                <td>category:</td>
                <td><select id="category">
                <option>Select Category</option>
                <?php 
                $query=mysql_query("select * from category");
                while($row=mysql_fetch_array($query)){
                    ?>
               <option value="<?php echo $row['category'];?>"><?php echo $row['category'];?></option>
                    <?php
                }
                ?>


                </select>
                </td>
            </tr>
            <tr>
                <td>Sub cat:</td>
                <td><select >
                <option >dependent dropdown</option>
                <option id="response"></option>

                </select>
                </td>
            </tr>

        </table>
    </form>

    </body>
    </html>
another page for ajax call:

此页面以json格式将数据返回到第一个文件.problem是我有一个选择框我想在我的选项中获取这些值但是我得到这个值,如果我要选择然后所有值自动selectrd

<?php
$con=mysql_connect("localhost","root","root");
mysql_select_db("register",$con);
$val=strtolower($_POST['kvalue']);

if($val=='mobile'){
    $query=mysql_query("select mobile from subcat");
    while($row=mysql_fetch_array($query)){
        $row[] = $r;
        print json_encode($row);
        echo $row['mobile']."</br>";
}
}
  

problem``

我想在html选项中从json获取数据,但是我得到了值但是所有选择的形式我如何获取或选择我想要的值?

1 个答案:

答案 0 :(得分:0)

检查此演示代码,选择选项更新以及您的连接和查询,我只需手动设置测试数据。这是你的html文件

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {

            $("#category").change(function () {
                var value = $("#category option:selected").val();
                $.ajax({
                    type: 'post',
                    url: 'subcat.php',
                    data: {kvalue: value},
                    datatype: 'json',
                    success: function (data) {
                        alert(data);
                        $("#response").html(data);
                    }

                })
            })
        })
    </script>
    <title></title>
</head>
<body>
<form method="post">
    <table>
        <tr>
            <td>category:</td>
            <td><select id="category">
                    <option>Select Category</option>
                    <option value="mobile">Mobile</option>
                    <option value="TV">Tv</option>
                    <option value="Phone">Phone</option>

                </select>
            </td>
        </tr>
        <tr>
            <td>Sub cat:</td>
            <td>
                <select id="response">
                    <option>dependent dropdown</option>

                </select>
            </td>
        </tr>

    </table>
</form>

</body>
</html>

这是你的subcat.php文件.i手动设置测试数据。如果您想选择依赖您的选项数据,只需更新您的查询

<?php
//$con=mysql_connect("localhost","root","root");
//mysql_select_db("register",$con);
$val = strtolower($_POST['kvalue']);

if ($val == 'mobile') {
    //$query=mysql_query("select mobile from subcat");
    $data = array('Option1', 'Option2', 'Option3');
    foreach ($data as $value => $key) {
        echo '<option value="' . $value . '">' . $key . '</option>';
    }
}

如果您使用ajax send选项选择第二个选项值,则更新查询,如

//$query=mysql_query("select mobile from subcat where subcat = '$val'");

这是我的演示数据,所以需要替换你的sql数据