Question

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

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

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

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

Nokia

从左侧组合框右侧组合框的内容应更改为

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

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

的问候，兰加纳

Answer 1

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

HTML：

<select id="brand"> 
    <option value="">- select -</option> 
    <option value="nokia">Nokia</option> 
    <option value="apple">Apple</option> 
</select> 

<select id="type"></select>

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 = '<option value="">- select -</option>';
        $.each(options, function(index, value) {
            html += '<option value="' + value + '">' + value + '</option>';
        });
    } else {
        html = '<option value="">Select a brand</option>';
    }
    selectType.html(html);
}).change();

参见http://www.jsfiddle.net/TJJ8f/

的完整示例

Answer 2

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

<?php

    // Do what you need to
    $modelsArray = getModelsForBrand($_REQUEST['brand']);
    echo json_encode($modelsArray);
?>

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

然后你的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("<option value='" + item.value + "'>"+ item.name + "</option>");
        });
    });
});

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

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

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

Answer 3

以前的一些SO帖子涵盖了这个主题，例如：Using javascript and jquery, to populate related select boxes with array structure

如何实现动态组合框选择系统

3 个答案: