Question

我知道有一些关于此的问题，但我找不到设置值的人，也触发了select函数。

我的代码是：

$("#ux-selfservice-account-edit-nationality").autocomplete({
    source: countryList,
    minLength: 1,
    autoFocus: true,
    select: function(event, ui) {
        $(this).val(ui.item.label).attr("oid", ui.item.oid);

        var select = $(this).closest(".ux-selfservice-account-box-edit").find(".ux-selfservice-account-edit-dni-type");
        // Check if the user has selected a different country (against the site)
        if (ui.item.iataCode == options.countryCode) {
            $(select).find("option").show();
        }
        else {
            $(select).find("option:not([value='PAS']):not([value=''])").hide();
            if ($(select).val() != "PAS") $(select).val('');
        }
        return false;
    },
    focus: function(event, ui) {
        return false;
    },
    search: function(event, ui) {
        $(this).attr("oid", "0");
    }
});

国家/地区列表如下：

[
    {
        iataCode: "AR",
        label: "Argentina",
        value: "Argentina",
        oid: 28515
    },
    ....
]

正如您所看到的，我在select函数中进行了非常小的检查，如果用户选择了我隐藏的其他国家/地区，或者从另一个选择下拉列表中显示了一些选项。

现在我的问题是，有时我希望通过javascript设置国家/地区，以便用户在字段中看到国家/地区名称，将oid设置为attr并检查国家/地区。

现在我正在做这样的事情......

$("#ux-selfservice-account-edit-nationality").val(getCountryName(profile.personalInfo.country)).attr("oid", profile.personalInfo.country);

但当然这是错误的，并没有检查其他验证。我也不能在这里进行验证，因为我没有countryCode（iataCode）。我知道我可以在列表中找到它，但重点是使用自动完成的相同功能..

Answer 1

为什么不将select事件处理程序中的逻辑提取到一个可以从Javascript代码中调用的独立函数中？

该功能所需要的只是国家/地区输入（当前代码中为this，以及所选国家/地区json，即ui.item）;

因此，您可以将当前逻辑提取到新函数countrySelected：

var countrySelected = function (countryInput, countryJSON) {
    $(countryInput).val(countryJSON.label).attr("oid", countryJSON.oid);

    var select = $(countryInput).closest(".ux-selfservice-account-box-edit").find(".ux-selfservice-account-edit-dni-type");
    // Check if the user has selected a different country (against the site)
    if (countryJSON.iataCode == options.countryCode) {
        $(select).find("option").show();
    } else {
        $(select).find("option:not([value='PAS']):not([value=''])").hide();
        if ($(select).val() != "PAS") $(select).val('');
    }
}

然后更新自动完成声明，以便select事件处理程序使用此函数：

$("#country").autocomplete({
    minLength: 1,
    source: countries,
    autoFocus: true,
    select: function (event, ui) {
        //just call the new function
        countrySelected(this, ui.item);
        return false;
    },
    focus: function (event, ui) {
        return false;
    },
    search: function (event, ui) {
        $(this).attr("oid", "0");
    }
});

这样您也可以手动调用countrySelected功能：

var countries = [{
    iataCode: "AR",
    label: "Argentina",
    value: "Argentina",
    oid: 28515
},
...
];
countrySelected($("#country"), countries[0]);

我创建了this fiddle，您可以在其中看到它。

如何手动设置值（并触发select事件）到jQuery自动完成

1 个答案: