1

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

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

选择年份后，将根据所选年份加载品牌列表。这是它崩溃的地方，不加载品牌以允许连续加载该品牌下的模型。

可视化：

[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;
    }
}

?>

它加载品牌（PhpConsole 输出“YEARS！”，但从不“MAKES！”或“MODELS！”。

我应该使用 jquery 的 .bind() 还是 .live()？

我已经为我自己的问题提供了答案。

4

2 回答 2

1

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

$("#make_select").change(function() {
     // your existing stuff
});
于 2012-07-04T16:48:03.783 回答
1

事实证明，我需要将 .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);
    });
});
...
于 2012-07-04T17:02:23.047 回答