Question

我正在创建一个Year-Make-Model选择器。

最初，所有三个选择框都被禁用（并且没有选项）。 “年”下拉列表基于通过.get（）运行的数据库查询加载，该查询在眨眼之间加载。

选择一年后，将根据所选年份加载一系列品牌。这是它崩溃的地方，而不是加载使得允许在该make下连续加载模型。

可视化：

[Years-----v]
[-Make-----v]
[-Model----v]

选择一年后

[1978------v]
[Makes-----v]
[-Model----v]

以下是我用来完成此任务的JavaScript：

<script type="text/javascript">
    $(function() {
        // LOAD YEARS
        $.get("/ymm/get.php", { func: "get_years", select_name: "year_select" },
            function(data){
                $("#ymm_year_select").html(data);
            });

        // LOAD MAKES
        $("#year_select").on("change", function() {
            var selected_value = $(this).val();

            $.get("/ymm/get.php", { func: "get_makes", select_name: "make_select", year: selected_value },
                function(data){
                    $("#ymm_make_select").html(data);
                });
        });

        // LOAD MODELS
        $("#make_select").on("change", function() {
            var selected_value = $(this).val();

            $.get("/ymm/get.php", { func: "get_models", select_name: "model_select", make: selected_value },
                function(data){
                    $("#ymm_model_select").html(data);
                });
        });

    });
</script>

作为参考，这是/ymm/get.php的样子：

<?php
header("Expires: Mon, 26 Jul 1990 05:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); 
header("Cache-Control: no-store, no-cache, must-revalidate"); 
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

include("../includes/class/PhpConsole.php");
PhpConsole::start();
include("../includes/configure.php");
include("../includes/class/DB.class.php");

/////////////////////////////////////////////////////////////////////////

function make_select($name, $data, $id = NULL) {
$id = (NULL === $id ? $name : $id);

?>
<select name="<?=$name?>" id="<?=$id?>">
    <option>--Select--</option>
    <?php
        if(!empty($data)) {
            foreach($data as $val => $display) {
    ?>
    <option value="<?=$val?>"><?=$display?></option>
    <?php
            }
        }
    ?>
</select>
<?php
}

$sql['get_years'] = "SELECT DISTINCT(`year`) FROM `ymm` WHERE `id` IN(SELECT `ymm` FROM `ymm_to_products` WHERE `products_id` IS NOT NULL AND `products_id` != '') ORDER BY `year` ASC";
$sql['get_makes'] = 'SELECT DISTINCT(`name`), `id` FROM `make` WHERE `id` IN(SELECT `make_id` FROM `ymm` WHERE `year`=%04d) ORDER BY `name` ASC';
$sql['get_models'] = 'SELECT DISTINCT(`name`), `id` FROM `model` WHERE `make_id`=(SELECT `id` FROM `make` WHERE `name` = \'%s\') ORDER BY `name`';

if(isset($_GET['func'])) {
$func = trim($_GET['func']);
$control_name = $_GET['select_name'];

    switch($func) {
        case 'get_years':
        debug('YEARS!');
        $years = DB::select_all($sql['get_years']);

        if(false !== $years && !empty($years)) {
            foreach($years as $year) {
                $year = intval($year['year']);
                $data[$year] = $year;
            }
        }

        make_select($control_name, $data);
        die();
        break;
        case 'get_makes':
        debug('MAKES!');
        $year = (int) $_GET['year'];
        $makes = DB::select_all(sprintf($sql['get_makes'], $year));

        if(false !== $makes && !empty($makes)) {
            foreach($makes as $make) {
                $name = $make['id'];
                $data[$name] = $make['name'];
            }
        }

        make_select($control_name, $data);
        die();
        break;
        case 'get_models':
            debug('MODELS!');
            $make = strip_tags(trim($_GET['make']));
            $models = DB::select_all(sprintf($sql['get_models'], $make));

            if(false !== $models && !empty($models)) {
            foreach($models as $model) {
                $name = $model['id'];
                $data[$name] = $model['name'];
                }
            }

            make_select($control_name, $data);
            die();
        break;
    }
}

?>

它加载了make（和PhpConsole输出“YEARS！”，但从不“MAKES！”或“MODELS！”。

我应该使用jquery的.bind（）还是.live（）？

我已经回答了我自己的问题。

Answer 1

您使用的是jquery 1.7，因为.on函数是在1.7中添加的。如果你使用的是旧版本而不是试试这个

$("#make_select").change(function() {
     // your existing stuff
});

Answer 2

事实证明，我需要将.on（）事件附加到包含（父）元素，以便它可以“冒泡”或其他任何东西。由于目标元素是从前一个请求动态加载的，因此必须以这种方式完成：

...
// LOAD MAKES
$("#application-search").on("change", "#year_select", function() {
var selected_value = $("#year_select").val();

$.get("/ymm/get.php", { func: "get_makes", select_name: "make_select", year: selected_value },
    function(data){
        $("#ymm_make_select").html(data);
    });
});

// LOAD MODELS
$("#application-search").on("change", "#make_select", function() {
var selected_value = $("#make_select").val();

$.get("/ymm/get.php", { func: "get_models", select_name: "model_select", make: selected_value },
    function(data){
        $("#ymm_model_select").html(data);
    });
});
...

Jquery - 连续的.get（）请求失败

2 个答案: