如何使一个选择框的值驱动第二个选择框的选项

Question

我想制作一个带有2个选择框的HTML表单.第一个选择框中的选定选项应该驱动第二个选择框中的选项.我想在客户端(使用javascript或jQuery)动态解决这个问题,而不是必须向服务器提交数据.

例如,假设我有以下菜单类别和菜单项:

• 三明治
  • 火鸡
  • 火腿
  • 培根
• 双方
  • Mac'n Cheese
  • 土豆泥
• 饮料
  • 可口可乐
  • 雪碧
  • Sweetwater 420

我会有两个select盒子,分别命名Menu Category和Items.当用户Sandwiches在Menu Category框中选择时,框中的选项Items将仅显示三明治选项.

为了使这更具挑战性,让我们假设我不知道菜单项或类别是什么,直到我准备将页面发送到客户端.我需要一些方法来"链接"两个选择列表的数据,但我不知道如何做到这一点.

我陷入困境,因为我可能会这样做.一旦我过滤掉第二个列表一次,当我在第一个列表中更改菜单类别后,如何"找到"列表选项？另外,如果我在思考SQL,我会在第一个框中有一个键,用于链接到第二个框中的数据.但是,我无法看到第二个框中有"key"元素的空间.

如何通过jQuery或普通javascript的组合解决这个问题？

Answer 1

在Dynamic Drive上查看此示例,或者您可以在google中搜索" chained select "以获取其他示例.

编辑:这是一个非常好的雷米夏普教程:使用jQuery和AJAX自动填充选择框

好吧,因为我有强迫症,我为你拼凑了一个演示.

它定义了一个变量,如果需要也可以加载为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');
 });

});