时间戳

首页 > 解决方案 > 下拉选择后自动填充输入框

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

问题描述

我有一些 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();

标签： javascriptjsondropdown

解决方案

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();

推荐阅读