3

私は2つのコンボボックスを持っています。コンボボックス 1 の選択に基づいてコンボボックス 2 に特定のデータを表示したい。

しかし、私はそれをオンタイムの選択にしたいので、コンボボックス 1 から必要なオプションを押すと、コンボボックス 2 はこの選択に一致するデータで満たされます。

コンボボックス 1 のオプションにオンクリック機能を付けようとしましたが、それらをクリックしても機能しませんでした...そうする方法はありますか?

4

4 に答える 4

3

最初のドロップダウンでイベント ハンドラーを割り当て、change選択した値に基づいて、2 番目のドロップダウンに入れる必要がある値をフェッチします。典型的なメーカー -> モデルの例は次のとおりです。

マークアップ:

​<select id="manufacturers">
    <option></option>
    <option value="Audi">Audi</option>
    <option value="Toyota">Toyota</option>
</select>

<select id="cars">
</select>

JavaScript:

​​var cars = {
    Audi: [ 'A2', 'A3', 'A4' ],
    Toyota: [ 'Auris', 'Avalon', 'Yaris' ]
}​​​​;

$("#manufacturers").change(function () {
   var $this = $(this);
   var selectedValue = $this.val();
   if (selectedValue) {
     var $cars = $("#cars").empty();
     var newCars = cars[selectedValue];
     $.each(newCars, function () {
         console.log(this);
       $("<option>" + this + "</option>").appendTo($cars);
     });
   }
});

デモ 。

于 2012-08-26T13:24:47.840 に答える
2

select タグ自体 (option タグではなく) で change (not click) イベントを使用する必要があります。例：

$('#combo1').change(function() {
     // Load new content for #combo2 here
});
于 2012-08-26T13:12:14.120 に答える
2 
$('select.option1').change(function() {
    // fill option2 with data from somewhere
});
于 2012-08-26T13:12:17.530 に答える
1

Chained は、連鎖選択用の単純な jQuery プラグインです。

http://www.appelsiini.net/projects/chained

このプラグインをいくつかのプロジェクトで使用しましたが、安定して期待どおりに動作します。お気軽にお試しください…</p>

于 2012-08-26T13:14:15.420 に答える