如何让一个下拉框的值驱动第二个下拉框的选项

Question

我想制作一个包含2个选择框的HTML表单。第一个选择框中选定的选项应该驱动第二个选择框中的选项。我希望在客户端动态解决这个问题（使用JavaScript或jQuery），而不必将数据提交给服务器。

例如，假设我有以下“菜单分类”和“菜单项目”：

- 三明治

- 火鸡 - 火腿 - 培根

- 配菜

- 奶酪通心粉 - 土豆泥

- 饮料

- 可口可乐 - 雪碧 - Sweetwater 420

我会有两个选择框，分别命名为“菜单类别”和“项目”。当用户在“菜单类别”框中选择“三明治”时，“项目”框中的选项将只显示三明治选项。

为了使这更具挑战性，让我们假设在准备向客户端发送页面之前，我不知道菜单项或类别是什么。我需要一些方法来“链接”两个选择列表的数据，但我不知道应该如何完成。

我不知道该如何解决这个问题。一旦我过滤掉第二个列表，当我在第一个列表中更改我的菜单类别时，如何“找到”列表选项？此外，如果我按照SQL的方式思考，我将在第一个框中使用一个键来链接到第二个框中的数据。但是，我看不到我有哪些空间可以放置“键”元素。

如何使用jQuery或纯JavaScript的组合解决这个问题？

- Ben McCormack

Answer 1

请查看Dynamic Drive上的示例，链接为：Dynamic Drive，或者您可以在谷歌上搜索“chained select”查找其他示例。

编辑：这里还有一篇非常好的Remy Sharp教程：使用jQuery和AJAX自动填充选框

---

因为我有强迫症，所以我为您制作了一个演示，链接为：demo。

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

});

- Mottie

Answer 2

你可以使用纯JavaScript。如果这是你所需要的全部JavaScript，那么jQuery可能太过于复杂。

在代码中创建一个函数来填充第二个下拉框。在第一个下拉框中，使用onChange=theFunctionYouCreated()调用该函数。

希望这些足以让你开始了解。

- pocketfullofcheese

---

我想我明白你的意思，但如果我事先不知道列表项是什么怎么办？那么我就无法嵌入数据以在js函数中使用，对吗？ - Ben McCormack