如何在初始加载页面时根据第一个列表框动态填充第二个列表框?

时间:2017-01-25 15:30:52

标签: javascript jquery json listbox

如果我有几个列表框,其中第一个列表框是通过json文件填充的,然后第二个列表框是根据第一个列表框中选择的内容填充的,那么如何让第二个填充onload?

第一个列表框加载抓取例如myfile.json,其中包含

    { [ { "snow project", "12345" }, { "rain project", "23245" } ]}

要生成一个列表框,例如snow项目为key,val为12345.第二个列表框抓取myfile_12345.json以填充第二个框。如果我选择下雨项目它会抓取数据并填写第二个列表框,但我希望第二个列表框能够为第一个选定项目提供数据onload,这可能会随着myfile.json文件中的内容发生变化而改变。

1 个答案:

答案 0 :(得分:0)

创建列表框的相同代码允许我设置第二个。我不确定添加更多内容时会有多么简单或实用。

    <script type="text/javascript">
            var $select = $('#project');
            $.getJSON('bamboo_projects.json', function(data,status) {
                    $select.html('');
                    $.each(data, function(key,val) {
                            if ( val.id != 'undefined' && $('#project option:selected').length == 0) {
                                    getRelease(val.id);
                            }
                            $select.append('<option value="' + val.id + '">' + val.name + '</options>');
                    });
            });
    </script>

我在创建第一个框时检查它何时要添加第一个选项并运行我用来获取第二个框内容的相同代码。

请注意,我确实尝试了var selected_item = val.id,但在$ .each和$ .getJSON代码完成后,selected_item超出了范围,因此我使用$ .each循环中的值。关于如何保持价值范围的想法?我试图在$ .getJSON / $。每个循环之外设置var selected_item,但它仍然没有保留该值。