如何实现动态combobox选择系统

我现在正在实现一个系统，我想实现一个combobox选择过程，但我不知道如何实现它，所以请你帮忙吗？

我的情况是这样的，假设我们有两个combobox选择列表，左边一个和右边一个，左边一个是主要的，右边是左边的孩子。

当我从左侧combobox中选择一个项目时，右侧combobox的内容应根据左侧combobox的选择进行更改，

例如：如果我选择品牌，让我们考虑一下手机

Nokia

从左侧combobox右侧combobox的内容应更改为

 C6-01 E7-00 5232 X3-02 C1-01 C7-00 5228 C5-03 5250 6120ci E5-00 E73 

像明智的。 请帮我实现这种场景！ 任何教程链接，了解场景的示例代码更好！

问候，Rangana

Answer 1

诀窍是订阅更改事件并相应地重置第二个框的内容。

HTML：

  - select - Nokia Apple   

JavaScript（准备好了）：

 var selectBrand = $("#brand"); var selectType = $("#type"); var optionsList = { nokia: [ "C6-01", "E7-00" ], apple: [ "iPhone 3", "iPhone 3G", "iPhone 4" ] }; selectBrand.change(function() { var brand = selectBrand.val(); var options = optionsList[brand]; var html; if (options) { html = '- select -'; $.each(options, function(index, value) { html += '' + value + ''; }); } else { html = 'Select a brand'; } selectType.html(html); }).change(); 

完整的例子见http://www.jsfiddle.net/TJJ8f/

Answer 2

这有两个方面。 首先，服务器将为您需要的类别返回JSON，其次是前端的代码。

这使用json_encode函数来获取用于获取模型的任何内容返回的数组上的JSON。 我自己没有使用过这个function，但看起来很简单。

然后你的jQuery看起来像这样：

 $("#brandCombo").change(function(){ var chosenBrand = $(this).val(); // Get the value $.getJSON('/your-php-file.php', { "brand" : chosenBrand }, function(request){ // Successful return from your PHP file $("#modelCombo").empty(); // For each item returned, add it to your models combo box $.each(request, function(i,item){ $("#modelCombo").append(""+ item.name + ""); }); }); }); 

在此示例中， brandCombo是具有品牌的列表的ID，而brandCombo是模型应该出现的列表的ID。 当brandCombo的值发生变化时，它会向您的PHP文件发出请求以获取JSON中的模型数组。 然后它会遍历每个并为您的modelCombo列表添加一个新选项。

我回答的类似问题就在这里 ，我提到了如何使用页面和列表框中的所有数据（隐藏/显示它们）或AJAX请求（如上例所示）。

另一个选项，如dyve的回答所示，是以JavaScript对象的forms获得页面上所需的所有信息。 如果你想这样做，那么PHP json_encode函数仍然可以使用（虽然你只需要用你的所有数据调用它一次并将它放到页面上）。

Answer 3

以前的一些SOpost涵盖了这个主题，看看这个例子： 使用javascript和jquery，用数组结构填充相关的选择框