Question

我有两个下拉列表，其内容相互依赖。基本上，当我从第一个下拉列表中选择一个名称时，第二个名称应显示属于所选特定名称的姓氏。如果我选择了另一个名称，则应在第二个下拉列表中加载另一个姓氏列表。

我只能为下拉列表中的第一个选定选项获取正确的姓氏。一旦我选择了另一个名字，姓氏就会保持不变。我如何对其进行编码以使其随每个选择而变化？

到目前为止，我将此作为一个似乎无法正常工作的事件监听器。请注意，第一个下拉列表ID为names，第二个下拉列表ID为lastnames

$(document).on("click", "#names", function(evt) {
    $('.wide-control').selector('refresh'); 
});

一旦应用程序从我的javascript函数

开始，下拉列表中的所有元素都会加载

function getNames() {      
    var url = config.api.server + config.api.uri + "/names";
    $.getJSON(url).done(function(response) {
        if (!response.length) {
            console.warn("Empty list");
        }
        config.namess = response;
        // console.log(response);

        $.map(config.namess, function(item) {
            $("#names").append($('<option>').text(item.namestring));
        });

        var SelectedName = $("#names").find("option:selected").text();

        function getLastNames() {   
            var url = config.api.server + config.api.uri + "/lasts";
            $.getJSON(url).done(function(answer){
                if (!answer.length) {
                    console.warn("Empty list");
                }
                config.lasts = answer;
                // console.log(answer);

                answer.forEach(function(LastItem) {
                    if (Selected === LastItem.NameString) {
                        var x = LastItem;
                        var lastNames = [];          
                        lastNames.push(x);

                        $.map(lastNames, function(i) {
                            $("#lastNames").append($('<option>').text(i.fullName));
                        });  
                    }       
                });
            }).fail(function(data, status, error) {
                console.error("Something went wrong");
            });
        }
        getLastNames();
    }).fail(function(data, status, error) {
        console.error("Something went wrong");
    });
}

如何刷新下拉选择

0 个答案: