相关疑难解决方法(0)

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

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

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

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

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

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

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

我正在使用此问题的接受答案来帮助我使用jQuery从JSON数组构建HTML选择菜单.

我的JSON数组从PHP脚本传递为$ menu,如下所示:

{ "options": [
    { "id":"7","name":"Smith, John"},
    { "id":"4","name":"Jones, Tom"}
  ]
}

首先,我构建选择菜单的骨架并将其插入页面:

var div = '<div class="row">';
var label = '<label for="employee">Employee</label>';
var select = '<select name="employee id="employee">';
var close = '</select></div>';
var menu = div + label + select + close;

$('#clicked_link').prepend(menu);

然后我尝试将$ menu数组传递给jQuery,如下所示:

var json = '<?php echo $menu; ?>';

然后我尝试使用链接问题中的示例将选项附加到新创建的选择菜单:

var options = eval('(' + json + ')');
var length = options.length;

for (var j = 0; j < length; …