Javascript 如何使一个选择框的值驱动另一个选择框的选项

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

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

• 三明治
  • 土耳其
  • 火腿
  • 培根
• 侧面
  • 麦当劳奶酪
  • 土豆泥
• 饮料
  • 可口可乐
  • 雪碧
  • 甜水420

我将有两个

选择

框，分别命名为

菜单类别

和

项目

。当用户在

菜单类别

框中选择

三明治

时，

项目

框中的选项将仅显示三明治选项

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

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

---

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

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

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

希望这足以让您开始学习。

在上查看此示例，或者您可以在谷歌上搜索“”以获取其他示例

编辑：这是一个非常好的雷米·夏普教程：

---

好吧，因为我有强迫症，我为你准备了一份工作

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

});

$（文档）.ready（函数（）{
变量menulist={“类别”：[{
“类别”：“三明治”，
“项目”：[
{“姓名”：“土耳其”}，
{“姓名”：“火腿”}，
{“名称”：“培根”}
]
},{
“类别”：“侧面”，
“项目”：[
{“name”：“Mac'n Cheese”}，
{“名称”：“土豆泥”}
]
},{
“类别”：“饮料”，
“项目”：[
{“名称”：“可口可乐”}，
{“名称”：“精灵”}，
{“名称”：“甜水420”}
]
}]
};
变量i，c='选择一个类别'，opt=$（''）；
var menu=menulist.categories；
对于（i=0；i

我想我明白你的意思了，但是如果我不知道列表中的项目是什么呢？那么我就不能在js函数中嵌入要使用的数据了，对吗？

$(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');
 });

});