Question

我有一些代码，其中第一个下拉菜单使用PHP和JQuery动态填充第二个下拉菜单。

使用的代码

$('#first_choice').change(...)

在此函数内部，getter.php文件使用第一个选择值从第二个菜单的数据库加载数据，如下所示：

 $first_choice=$("#second-choice").load(
            "getter.php?choice=" + $("#first-choice").val()
  );

这个php页面是json编码的。在更改函数内部有一个.get()函数，它具有选择菜单php页面的url，一个函数（数据）附加到第二个菜单的选项，格式“json”作为最后一个参数。单击第一个菜单时，调用更改功能一次以更改第二个菜单。我记得.ajax参数是假的。

Answer 1

第一个下拉菜单更改时ajax第二个下拉菜单更改的示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="js/jquery-1.9.1.min.js"></script>
    <script>
        $(function(){
            $('#first_choice').change(function(){
                $.ajax({
                    url: "getter.php?choice=" + $(this).val()
                }).done(function(data){
                    data = JSON.parse(data);
                    var html = '';
                    for(i=0;i<data.length;++i){
                        html += '<option value="'+data[i]+'">'+data[i]+'</option>';
                    }
                    $('#second-choice').html(html);
                });
            });
        });
    </script>
    <style>
        {padding:0;margin:0;}
    </style>
</head>
<body>
    <select id="first_choice">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>
    <select id="second-choice">
    </select>
</body>
</html>

处理文件中的代码“getter.php”：

<?php
$out = array();
if(isset($_GET['choice']))
{
    for($i=100;$i<10000000;$i*=10)
    {
        $out[] = $_GET['choice']*$i;
    }
}
echo json_encode($out);
?>

下拉菜单动态填充第二个下拉列表

1 个答案: