4

初心者の私でも悩みを解決できる場があると嬉しいです！ここから行く手がかりはありません。

車のメーカー、車のモデル、年、ドライバー、スケールをリストする相互依存関係を作成しようとしています。

フィールドを作成し、選択内容に応じて自動車メーカーと自動車モデルを入力できます。前のボックスで行った選択に応じて、「年」フィールドにデータを入力する方法に行き詰まっています。最初のボックスには関数が必要であることを理解しています。これが私のコードです」

HTML:

<form name="selectionForm">
    <select name="makes" id="makes" size="3" style="width:125px">
        <option selected>Select a Make>></option>
    </select>
    <select name="models" id="models" size="3" style="width:125px"></select>
    <select name="years" id="years" size="3" style="width:125px"></select>
    <select name="drivers" id="drivers" size="3" style="width:125px"></select>
    <select name="scales" id="scales" size="3" style="width:125px"></select>
</form>

JavaScript:

jQuery(function($) {
    initModels();

    function initModels() {
        var makesAndModels = {
            'Ford': ['Fiesta', 'Focus', 'Mondeo'],
            'Vauxhall': ['Astra', 'Cavalier', 'Vectra']
        };

        // Populate makes
        $.each(makesAndModels, function (k, v) {
            $('#makes').append('<option>' + k + '</option>');
        });

        // Populate models
        $('#makes').change(function() {
            var $models = $('#models');

            $models.html("");

            var models = makesAndModels[$(this).val()];

            $.each(models, function (k, v) {
                $models.append('<option>' + v + '</option>');
            });
        });
    }
});

ここからどこへ行くべきか見当もつかないので、あなた自身からの指示をいただければ幸いです。

4

2 に答える 2

7

わかりました、これは長い答えであり、準備に長い時間がかかりました。また、このエッセイを読みたくない場合は、以下にjsFiddleがあります。

各車を個別のオブジェクトとして保管する方がはるかに優れています。データベースを持っている場合 (または将来使用する予定がある場合)、これがデータの保存方法です。ネストされた配列も指数関数的に苦痛になるため、それらを避けるのが最善です。まず、データ構造を次のように変更します。

var vehicles = [
    { make: 'Ford', model: 'Fiesta', year: '2001', driver: 'me', scale: '1:43' },
    { make: 'Ford', model: 'Fiesta', year: '2005', driver: 'me', scale: '1:33' },
    { make: 'Ford', model: 'Focus', year: '1999', driver: 'you', scale: '1:18' },
    { make: 'Ford', model: 'Modeo', year: '1998', driver: 'Nigel Mansell', scale: '1:43' },
    { make: 'Vauxhall', model: 'Astra', year: '2002', driver: 'James Thompson', scale: '1:43' },
    { make: 'Vauxhall', model: 'Vectra', year: '2000', driver: 'Jason Plato', scale: '1:18' }
];

まず最初に、イニシャル make 選択ボックスを事前に生成します。

var makes = get_distinct(vehicles, 'make');
$.each(makes, function(index, value) {
   $('select#make').append('<option value="' + value + '">' + value + '</option>')
});

それができたら、データをフィルタリングする方法を設定する必要があります。選択したオプションで車両をフィルタリングし、個別の値を取得するための関数が必要です。以下filter_vehicles()はひどいですが、疲れていて遅いので、やらなければなりません。これを動的にしたほうがいいでしょう。簡単な解決策がありますが、私の脳は今揚げられています.

function filter_vehicles() {
    return $.grep(vehicles, function(n, i) {
        if ($('#driver').val() != '')
            return n.make == $('#make').val() && n.model == $('#model').val() && n.year == $('#year').val() && n.driver == $('#driver').val();
        if ($('#year').val() != '')
            return n.make == $('#make').val() && n.model == $('#model').val() && n.year == $('#year').val();
        if ($('#model').val() != '')
            return n.make == $('#make').val() && n.model == $('#model').val();
        else
            return n.make == $('#make').val();
    });
}

// returns distinct properties from an array of objects
function get_distinct(array, property) {
   var arr = [];

   $.each(array, function(index, value) {
       if ( $.inArray(value[property], arr) == -1 ) {
           arr.push(value[property]);
       }
   });

   return arr;
}

次に、選択ボックスを更新する必要があります。個々の選択ボックスの変更イベントをターゲットにして手動で行うこともできますが、すべての選択ボックスにイベントを添付して動的に行うこともできます。追加のフィールドを追加するときにオーバーヘッドが追加されないため、私はこの方法を好みます。

$('select').change(function() {
    // don't execute if this is the last select element
    if ($(this).is(':last')) return;

    // clear all of the following select boxes, leaving a blank option
    $(this).nextAll().html('<option></option>');

    // get list of vehicles filtered by all the previous parameters
    var filtered_vehicles = filter_vehicles();

    // get the next select element
    var next = $(this).next();

    // get the distinct values from our list of filtered vehicles
    var values = get_distinct(filtered_vehicles, next.attr('id'));

    // append our options
    $.each(values, function(index, value) {
        next.append('<option value="' + value + '">' + value + '</option>')
    });
});

全体として、次のような jsFiddle が得られます: http://jsfiddle.net/8FHZK/

これはすべて SQL の方が簡単です。したがって、データベースがある場合は、サーバー上でクエリを実行してフィルター処理されたセットを返します。これにより、上記のやっかいなコードが少し省略されます。

なぜこれをすべて手動で書いたのかわかりません。おそらく、すでにすべてを実行している (そしてより優れた) jQuery プラグインがあるからです。しかし、ちょっと、それは終わった、私は楽しんだ、そしてすべてのコードはあなたの学習を助けるためにコメントされています:)

于 2012-04-10T10:29:30.637 に答える
0 
$('#years').change(function() {
  //do something like Populate models....
}

それで、違いは何ですか？

于 2012-04-10T05:17:27.820 に答える