1

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

使用的代码

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

在这个函数中,一个getter.php文件使用第一个选择值从数据库加载第二个菜单的数据,如下所示:

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

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

4

1 回答 1

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);
?> 
于 2013-10-06T21:01:58.143 回答