Użyj JQUERY / JSON do automatycznego wypełnienia wybranych pól rozwijanych

OK spędziłem dużo czasu na przeglądaniu przykładów, ale nie mogę znaleźć takiego, który pomoże mi w mojej sytuacji. Mam plik JSON, uproszczony dla tego przykładu:

{
 "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"
                            }
    }
]}

Próbuję utworzyć 2 pola wyboru. Gdy użytkownik wybierze pierwsze pole pozycji, automatycznie wypełni drugie z atrybutami (nazwami). Oto co mam do tej pory:

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

i kod:

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

Ten kod automatycznie wypełni drugie pole WSZYSTKIM imionami w każdej pozycji. Wydaje mi się, że nie wiem, jak wypełnić je nazwami każdego unikalnego obiektu. Dzięki za pomoc!

questionAnswers(2)

yourAnswerToTheQuestion