一千萬個為什麽

搜索

如何使一個選擇框的值驅動第二個選擇框的選項

我想制作一個帶有2個選擇框的HTML表單。第一個選擇框中的選定選項應該驅動第二個選擇框中的選項。我想在客戶端上動態解決這個問題(使用javascript或jQuery),而不是必須向服務器提交數據。

例如,假設我有以下菜單類別菜單項

  • Sandwiches
    • Turkey
    • Ham
    • Bacon
  • Sides
    • Mac 'n Cheese
    • Mashed Potatoes
  • Drinks
    • Coca Cola
    • Sprite
    • Sweetwater 420

我將有兩個 select 框,分別命名為 Menu CategoryItems 。當用戶在菜單類別框中選擇 Sandwiches 時, Items 框中的選項將僅顯示Sandwich選項。

為了使這更具挑戰性,讓我們假設我不知道菜單項或類別是什麽,直到我準備將頁面發送到客戶端。我需要一些方法來“鏈接”兩個選擇列表的數據,但我不知道如何做到這一點。

我陷入困境,因為我可能會這樣做。一旦我過濾掉第二個列表一次,當我在第一個列表中更改菜單類別後,如何“找到”列表選項?另外,如果我在思考SQL,我會在第一個框中有一個鍵,用於鏈接到第二個框中的數據。但是,我無法看到第二個框中有“key”元素的空間。

如何通過jQuery或普通javascript的組合解決這個問題?

最佳答案

動態驅動器上查看此示例,或者您可以在Google上搜索“鏈式選擇“其他示例。

Edit: And here is a very nice Remy Sharp tutorial: Auto-populating Select Boxes using jQuery & AJAX


好吧,因為我有強迫癥,我為你匯總了演示

它定義了一個變量,如果需要也可以加載為json。

HTML

 

腳本

$(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 = '
', opt = $('
');
var menu = menulist.categories;

for (i=0; i < menu.length; i++){
 c += '
';
}
$('#cat')
 .HTML(c)
 .change(function(){
  var indx = this.selectedIndex - 1;
  if (indx < 0) {
   $('#items').empty().attr('disabled','disabled');
   return;
  }
  var item = '
';
  for (i=0; i < menu[indx].items.length; i++){
    item += '
';
  }
  $('#items').HTML(item).removeAttr('disabled');
 });

});

轉載註明原文: 如何使一個選擇框的值驅動第二個選擇框的選項