0

OK私は例を探すのに多くの時間を費やしましたが、私の状況に十分に役立つものを見つけることができません。この例のために簡略化された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つの選択ボックスを作成しようとしています。ユーザーが位置の最初のボックスを選択すると、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>');
                })
            })
        })
    },
});​

このコードは、2番目のボックスにすべての位置のすべての名前を自動入力します。それぞれの一意のオブジェクトの名前で埋める方法がわからないようです。助けてくれてありがとう！

4

2 に答える 2

1

このようなことを試してください。オプションの値プロパティが本当に必要です。オプションに data-id 属性を追加して、それを使用して Position のインデックスを格納できるようにしました。

$.each(data.Company, function(i, v) {
    // create option with value as index - makes it easier to access on change
    var options = $('<option/>', {value: v.Position, text: v.Position}).attr('data-id',i);    
    // append the options to job selectbox
    $('#job').append(options);
});

// bind change event
$('#job').change(function() {
    // cache this
    var $el = $(this);
    // get data-id attr from selected option
    var id = $('option:selected',this).data('id');
    // empty select
    $('#name').empty();
    // get name values for selected option
    $.each(data.Company[id].Name, function(i, v) {
        // create option elements
        var options = $('<option/>', {value: v, text: v});
        // append the options to name selectbox
        $('#name').append(options);
    });    
}).change();// trigger change() on page load to fill name selectbox​

http://jsfiddle.net/wirey00/xYX8z/

于 2012-11-07T16:02:24.867 に答える
1

これでうまくいくはずです。

$.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>');
        }
});
于 2012-11-07T15:26:51.737 に答える