4

2 つの選択ボックスを持つ HTML フォームを作成したいと考えています。最初の選択ボックスで選択したオプションは、2 番目の選択ボックスのオプションを駆動する必要があります。サーバーにデータを送信するのではなく、(javascript または jQuery を使用して) クライアントでこれを動的に解決したいと考えています。

たとえば、次のMenu CategoriesとMenu Itemsがあるとします。

  • サンドイッチ
    • 七面鳥
    • ハム
    • ベーコン
  • 側面
    • マックンチーズ
    • マッシュポテト
  • 飲み物
    • コカコーラ
    • スプライト
    • スイートウォーター 420

それぞれとという名前の 2 つのselectボックスがあります。ユーザーがボックス内で選択すると、ボックス内のオプションにはサンドイッチ オプションのみが表示されます。Menu CategoryItemsSandwichesMenu CategoryItems

これをさらに難しくするために、ページをクライアントに送信する準備が整うまで、メニュー項目またはカテゴリが何であるかを知らないと仮定しましょう。2 つの選択リストのデータを「リンク」する何らかの方法が必要ですが、それがどのように行われるかはわかりません。

私はこれにどのようにアプローチするかについて行き詰まっています。2 番目のリストを 1 回フィルターで除外したら、1 番目のリストでメニュー カテゴリを変更したら、どのようにリスト オプションを「見つける」ことができますか? また、SQL で考えている場合、1 番目のボックスにキーがあり、2 番目のボックスのデータにリンクするために使用されます。ただし、2 番目のボックスに「キー」要素の余地がある場所がわかりません。

この問題は、jQuery またはプレーンな JavaScript を組み合わせてどのように解決できますか?

4

2 に答える 2

5

ダイナミックドライブでこの例を確認するか、他の例についてはgoogleで「 chainedselect」を検索できます。

編集：そして、これは非常に素晴らしいRemy Sharpチュートリアルです：jQueryとAJAXを使用した選択ボックスの自動入力

ええと、私はOCDを持っているので、あなたのためにデモを一緒に投げました。

必要に応じて変数をjsonとしてロードすることもできると定義しています。

HTML

<select id="cat"></select> <select id="items" disabled></select>

脚本

$(document).ready(function(){

var menulist = { "categories" : [{
 "category" : "Sandwiches",
 "items" : [
   {"name": "Turkey"},
   {"name": "Ham"},
   {"name": "Bacon"}
  ]
 },{
 "category" : "Sides",
 "items" : [
   {"name": "Mac 'n Cheese"},
   {"name": "Mashed Potatoes"}
  ]
 },{
 "category" : "Drinks",
 "items" : [
   {"name": "Coca Cola"},
   {"name": "Sprite"},
   {"name": "Sweetwater 420"}
  ]
 }]
};

var i,c = '<option>Select a category</option>', opt = $('<option/>');
var menu = menulist.categories;

for (i=0; i < menu.length; i++){
 c += '<option>' + menu[i].category + '</options>';
}
$('#cat')
 .html(c)
 .change(function(){
  var indx = this.selectedIndex - 1;
  if (indx < 0) {
   $('#items').empty().attr('disabled','disabled');
   return;
  }
  var item = '<option>Select an item</option>';
  for (i=0; i < menu[indx].items.length; i++){
    item += '<option>' + menu[indx].items[i].name + '</options>';
  }
  $('#items').html(item).removeAttr('disabled');
 });

});
于 2010-04-08T21:36:35.147 に答える
0

プレーンな JavaScript を実行できます。必要な JavaScript がこれだけである場合、jQuery はおそらく多すぎます。

2 番目のコンボ ボックスに入力する関数を作成します。最初のコンボ ボックスでは、その関数を onChange=theFunctionYouCreated() で呼び出します。

始めるにはこれで十分だと思います。

于 2010-04-08T21:23:11.863 に答える