如何使用Selectric正确实现selectMapping下拉映射自动填充功能

原代码错误点 #

• 变量声明语法错误：state变量声明行末尾错误使用分号，导致后续country、language等变量脱离当前变量声明块，成为隐式全局变量
• 国家下拉框赋值逻辑错误：原生DOM元素的value是可读写属性而非方法，Selectric组件要求先通过jQuery给原生select赋值，再调用refresh方法才能更新视图
• else分支语法错误：多个输入框赋值语句未补全右值，且重复对postal字段赋值

修正后代码 #

var select = document.getElementById("selectAddress"),
    street = document.getElementById("streetInput"),
    city = document.getElementById("cityInput"),
    postal = document.getElementById("postalInput"),
    state = document.getElementById("stateInput"),
    country = document.getElementById("countryInput"),
    language = document.getElementById("language"),
    apiForm = document.getElementById("apiform");

console.log(apiForm)

var mapping = {
    "1": { 'sampleStreet': "Heilsbronner Strasse 4", 'sampleCity': "Neuendettelsau", 'samplePostal': "91564", 'sampleState': "Bayern", 'sampleCountry': "de" },
    "2": { 'sampleStreet': "1600 Pennsylvania Avenue", 'sampleCity': "Washington", 'samplePostal': "20500", 'sampleState': "Washington D.C.", 'sampleCountry': "us" },
    "3": { 'sampleStreet': "Champ de Mars 5 Av. Anatole", 'sampleCity': "Paris", 'samplePostal': "75007", 'sampleState': "Paris", 'sampleCountry': "fr" },
    "4": { 'sampleStreet': "1 Queen's Rd W", 'sampleCity': "Hong Kong", 'samplePostal': "Neuendettelsau", 'sampleState': "Hong Kong", 'sampleCountry': "hk" },
};

select.addEventListener("change", function () {
    var selectedMapping = mapping[select.value];

    if (selectedMapping) {
        street.value = selectedMapping.sampleStreet;
        city.value = selectedMapping.sampleCity;
        postal.value = selectedMapping.samplePostal;
        state.value = selectedMapping.sampleState;
        // 先赋值再刷新Selectric组件
        $(country).val(selectedMapping.sampleCountry).selectric("refresh");
    } else {
        street.value = "";
        city.value = "";
        postal.value = "";
        state.value = "";
        $(country).val(null).selectric("refresh");
    }
});

内容的提问来源于stack exchange，提问作者Robert9