使用jQuery / JSON自动填充选择下拉框下拉框、jQuery、JSON

2023-09-10 14:07:11 作者:孤独症゛

OK,我花了花了很多时间寻找过的例子,但无法找到一个可以帮助我足够了我的情况。我有一个JSON文件,简化了这个例子:

OK I spent spent a lot of time looking over examples but can't find one which helps me enough for my situation. I have a JSON file, simplified for this example:

{
 "Company":[
    {
        "Position": "Manager",
        "Name": {
                            "11": "joe",
                            "12": "bill",
                            "166": "John"
                            }
    },
{

        "Position": "Tech",
        "Name": {
                            "11": "Bob",
                            "12": "Cindy",
                            "166": "Karl"
                            }
    },
{

        "Position": "Sales",
        "Name": {
                            "11": "Sam",
                            "12": "Ron",
                            "166": "Sara"
                            }
    }
]}

我想创建2选择框。当用户选择位置的第一框,它会自动填充第二个具有属性(名称)。因此,这里是我到目前为止有:

I am trying to create 2 select boxes. When the user selects the first box of positions, it will auto-fill the second with the attributes (names). So here is what I have so far:

<select id="job"></select>
<select id="name"></select>

和code:

and the code:

$select = $('#job');
$select2 = $('#name');

$.ajax({
    url: 'factors.json',
    dataType: 'JSON',
    success: function(data) {

        $select.html('');
        $.each(data.Company, function(key, val) {
            $select.append('<option id="' + key + '">' + val.Position + '</option>');



            $("#job").change(function() {
                $.each(val.Name, function(key2, val2) {
                    $select2.append('<option id="' + key2 + '">' + val2 + '</option>');
                })
            })
        })
    },
});​

这code将自动填充第二个框全部在每一个位置上的名称。我仅仅指刚似乎无法弄清楚如何与每个唯一对象的名称填充它。感谢您的帮助!

This code will autofill the second box with ALL the names in every position. I jsut can't seem to figure out how to fill it with the names of each unique object. Thanks for any help!

推荐答案

这应该可以解决问题。

$.each(data.Company, function(key, val) {
    $select.append('<option id="' + key + '">' + val.Position + '</option>');
});



$("#job").change(function(e) {
    $select2.empty();
    $index = $(this).children(':selected').attr('id');
        for (var k in data.Company[$index].Name) {
            $select2.append('<option id="' + k + '">' + data.Company[$index].Name[k] + '</option>');
        }
});