1

Year-Make-Modelチューザーを作成しています。

最初は、3つの選択ボックスすべてが無効になっています（オプションはありません）。「年」ドロップダウンは、瞬く間に読み込まれる.get（）を介して実行されるDBクエリに基づいて読み込まれます。

年を選択すると、選択した年に基づいてメーカーのリストが読み込まれます。これが故障する場所であり、makeをロードしないことで、その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（）を使用する必要がありますか？

私は自分の質問に対する答えを提供しました。

4

2 に答える 2

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 に答える
1

1.7で.on関数が追加されたため、jquery 1.7を使用していますか。古いバージョンを使用している場合は、代わりにこれを試してください

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