Question

我有一些javascript，应该根据下拉列表中的选择来填充输入字段。它在后台使用json文件查找值。 JSON如下所示：

      "name":"Netherlands",
      "alpha3":"NLD",

与json的连接有效，并且所有值（在这种情况下为国家）在下拉列表中均可见。但是，当我在下拉列表中选择一个值时，应使用json中的alpha3值自动填充输入字段。

这不起作用，输入字段始终用JSON文件中的最后一个alpha3值（称为ZZZ）填充，而不是与所选选项相对应的那个。

我在做什么错了？

    let dropdown = document.getElementById('landen');
    dropdown.length = 0;

    let defaultOption = document.createElement('option');
    defaultOption.text = 'Selecteer land';

    dropdown.add(defaultOption);
    dropdown.selectedIndex = 0;

    const url = 'lib/jsondata/landenmetcodes.json';

    const request = new XMLHttpRequest();
    request.open('GET', url, true);

    request.onload = function() {
      if (request.status === 200) {
        const data = JSON.parse(request.responseText);
        let option;
        for (let i = 0; i < data.length; i++) {
          option = document.createElement('option');
          option.text = data[i].name;
          option.value = data[i].name;
          dropdown.add(option);
          tekst = data[i].alpha3;

        document.getElementById("landen").addEventListener("change", myFunction);
        function myFunction() {
        var x = document.getElementById("landcode");
        x.value = tekst;
        }
    }
    } else {
        // Reached the server, but it returned an error
      }   
    }

    request.onerror = function() {
      console.error('An error occurred fetching the JSON from ' + url);
    };
    request.send();

Answer 1

myFunction是事件回调，仅在触发事件时才触发。您正在尝试在事件回调中使用来自ajax回调的局部变量。在事件触发时，“ tekst”不再可用。您可以将json保存在全局变量中，然后在事件回调中使用

let dropdown = document.getElementById('landen');
dropdown.length = 0;

let jsOptions = {};
let defaultOption = document.createElement('option');
defaultOption.text = 'Selecteer land';

dropdown.add(defaultOption);
dropdown.selectedIndex = 0;

document.getElementById("landen").addEventListener("change", myFunction);

function myFunction(evt) {
    const val = evt.target.value;
    var x = document.getElementById("landcode");
    x.value = jsOptions[val];
}

const url = 'lib/jsondata/landenmetcodes.json';

const request = new XMLHttpRequest();
request.open('GET', url, true);

request.onload = function() {
    if (request.status === 200) {
        const data = JSON.parse(request.responseText);
        let option;
        for (let i = 0; i < data.length; i++) {
            option = document.createElement('option');
            option.text = data[i].name;
            option.value = data[i].name;
            dropdown.add(option);
            jsOptions[data[i].name] = data[i].alpha3;
        }
    } else {
        // Reached the server, but it returned an error
    }
}


request.onerror = function() {
    console.error('An error occurred fetching the JSON from ' + url);
};

request.send();

下拉选择后自动填充输入框

1 个答案: