4

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

例如，假设我有以下菜单类别和菜单项：

  • 三明治
    • 火鸡
    • 火腿
    • 熏肉
  • 双方
    • 通心粉奶酪
    • 土豆泥
  • 饮料
    • 可口可乐
    • 雪碧
    • 甜水 420

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

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

我被困在如何处理这个问题上。一旦我一次过滤掉第二个列表，一旦我更改了第一个列表中的菜单类别，我如何“找到”列表选项？另外，如果我在考虑 SQL，我会在第一个框中有一个键，用于链接到第二个框中的数据。但是，我看不到第二个框中的“关键”元素在哪里有空间。

如何结合使用 jQuery 或纯 javascript 来解决这个问题？

4

2 回答 2

5

查看动态驱动器上的这个示例，或者您可以在谷歌搜索“链式选择”以获取其他示例。

编辑：这是一个非常好的 Remy Sharp 教程：Auto-populating Select Boxes using 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');
 });

});
于 2010-04-08T21:36:35.147 回答
0

你可以做普通的javascript。如果这就是你需要 javascript 的全部，那么 jQuery 可能太多了。

在填充第二个组合框的函数中创建一个函数。在第一个组合框中，您使用 onChange=theFunctionYouCreated() 调用该函数

希望这足以让你开始。

于 2010-04-08T21:23:11.863 回答