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

I'm implementing a system these days, i want to implement a combo box selection process but i don't know how to implement it, so asking you guys favor?

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

my scenario is this, let's say we have two combo box selection lists, left one and right one, left one is the main one and the right one is the child of the left one.

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

when i select a item from the left combo box the right combo box's content should be changed according to the selection of the left one,

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

Ex: let's think about mobile phones, if i select the brand

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

Nokia

from the left combo box right combo box's content should be changed to

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

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

like wise. please help me to implement a this kind of scenario! any tutorial links, sample codes to understand the scenario is better!

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

regards, Rangana

3 个解决方案

#1

The trick is do subscribe to the change event and reset the contents of the second box accordingly.

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

HTML:

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

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

JavaScript (on ready):

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();

Full example at See http://www.jsfiddle.net/TJJ8f/

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

#2

This works by having two things. Firstly, a server that will return JSON for the category you need and, secondly, the code for the front end.

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

<?php

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

This uses the json_encode function to get the JSON on the array returned by whatever you use to get the models. I haven't used this function myself but it looks pretty simple.

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

Then your jQuery would look like this:

然后你的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>");
        });
    });
});

In this example, brandCombo is the ID of the list with the brands and modelCombo is the ID of the list the models should appear. When the value of brandCombo is changed, it makes the request to your PHP file to get the array of models in JSON. Then it goes through each one and adds a new option to your modelCombo list.

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

A similar question I answered is here, where I mentioned how to do it with all the data already on the page and in listboxes (hiding/showing them) or by AJAX requests (as the example above).

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

The other option, as shown in dyve's answer is to have all the information you need on the page already, in the form of a JavaScript object. If you wanted to do this, then then PHP json_encode function could still be of use (although you just call it once with all your data and plop it onto the page).

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

#3

A number of previous SO posts cover this topic, have a look at this for example: Using javascript and jquery, to populate related select boxes with array structure

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

#1