0


私は解決できないように見える非常に複雑な問題を抱えています。

ユーザーがテキストボックスに特定の「用語」を入力すると、選択リストに入力する入力テキストボックスフィールドがあります。

例:
- ユーザーがテキスト ボックスに「Mercedes」という単語を入力すると、選択リストには「A クラス」、「B クラス」、「C クラス」、「S クラス」が入力されます
。テキスト ボックスに「Audi」と入力すると、選択リストに「A4」、「A5」、「A6」などが表示されます。

これまでのところ、これは意図したとおりに動作します。<div>ただし、ユーザーが選択リストからモデルを選択すると、対応する選択された車両のアクセサリが動的に読み込まれる以下を作成したいと思います。

これが私がこれまでに持っているコードです:

HTML

<div>
Manufacturer:<input type="text" id="car_manufacturer"/>
Model: <select id="car_model"></select>
</div>

<p>Vehicle Model Accessories:</p>
<div id="model_accessories">
<!--- Here is a list of the selected vehicle model's accessories. It will change when the model selection changes ------> 
</div>

Javascript

vehicleModels = {
   "Mercedes": ["A-class", "B-class", "C-class", "S-class", "SLK", "ML", ],
   "Audi": ["A3", "A4", "A5", "A6", "A7", "A8", ],
   "BMW": ["120", "320", "330", "520", "635", "745", ]
}

この関数は、テキスト ボックスの値を取得し、それが上記のオブジェクトで定義されているかどうかを確認します。そうである場合、対応する車両モデルが選択リストに追加されます。 

    $('#car_manufacturer').change(function() {
            if(vehicleModels[$(this).val()]) { 
                $.each(vehicleModels[$(this).val()], function() { 
                    $('#car_model').append('<option>' + this + '</option>');
                 });
            } 
});​

ここから問題が始まります!モデルのアクセサリ<div>に、対応する選択したモデルのアクセサリを追加するにはどうすればよいですか? 現在カー用品を保管している様子です。

mercedes_accessories = ["Xenons", "Adaptive cruise control", "sunroof"];
bmw_accessories = ["Start/stop", "heated seats", "Leather trim"];
audi_accessories = ["Electric seats", "B&O Sound System", "Leather trim",];

どんな助けでも大歓迎です。質問が少し曖昧で申し訳ありませんが、説明するのはかなり難しいです。ありがとうございました！

4

2 に答える 2

1

私はこのようなことをします：

var vehicleModels = {
       mercedes: ["A-class", "B-class", "C-class", "S-class", "SLK", "ML", ],
       audi: ["A3", "A4", "A5", "A6", "A7", "A8", ],
       bmw: ["120", "320", "330", "520", "635", "745", ]
    },
    vehicleAcc = {
        a3 : ["Xenons", "Adaptive cruise control", "sunroof"],
        a4 : ["Xenons", "Adaptive cruise control", "sunroof"],
        a6 : ["Xenons", "Adaptive cruise control", "sunroof"]
    };


$('#car_manufacturer').on('change', function() {
    if(this.value.toLowerCase() in vehicleModels) { 
        $.each(vehicleModels[this.value.toLowerCase()], function(i,e) { 
            $('#car_model').append('<option>'+e+'</option>');
        });
    }
});

$('#car_model').on('change', function() {
    if (this.value.toLowerCase() in vehicleAcc) {
        $.each(vehicleAcc[this.value.toLowerCase()], function(i,e) {
            $('#car_model_acc').append('<option>'+e+'</option>');
        });
    }
});

フィドル

于 2012-10-29T23:28:58.840 に答える
0

これを試して：

var accessories;

accessories.mercedes = ["Xenons", "Adaptive cruise control", "sunroof"];
accessories.bmw = ["Start/stop", "heated seats", "Leather trim"];
accessories.audi = ["Electric seats", "B&O Sound System", "Leather trim"];

$("#car_model").change( function( ) {

    // cache accessories for this manufacturer
    var arr = accessories[ $("#car_manufacturer").val().toLowerCase() ];

    for( var i = 0; i < arr.length; i += 1 ) {
       $("#accessories").append("<option>" + arr[i] + "</option>");
    }
});
于 2012-10-29T23:35:13.380 に答える