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

好吧，我花了很多时间查看示例，但找不到一个对我的情况有足够帮助的示例。我有一个 JSON 文件，对此示例进行了简化：

{
 "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 个选择框。当用户选择第一个位置框时，它将自动使用属性（名称）填充第二个位置。到目前为止，这是我所拥有的：

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

和代码：

$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>');
                })
            })
        })
    },
});​

此代码将自动填充第二个框中每个位置的所有名称。我似乎不知道如何用每个独特对象的名称填充它。谢谢你的帮助！

这应该可以解决问题。

$.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>');
        }
});