如何根据从json生成的选择列表中选择的选项填充表单（或其他元素）？

Question

我有一个从JSON数据生成的列表。我想使用选择的选项填充表单或div或实际上任何元素，并用表单数据填充元素。我已经解析了JSON并可以根据需要访问它，但是我不知道如何创建所需的on页面元素并用数据填充它。我可以执行创建列表或表之类的操作，或者在页面上列出所有json数据而不会出现问题，但是我根本无法弄清楚如何选择其中一个选项，并用期望的数据填充元素。由于数据的处理方式，我无法使用单独的html页面或任何简单的方法。我将在下面显示与我一样多的代码，并希望json和javascript专家可以为我提供帮助，因为此时我有点自己的技能。

我已经动态创建了选择列表，并将数据解析到页面中。我已经测试并尝试了很多方法来完成这项工作，您将看到一些额外的控制台登录。我在想可能带有键值或if语句的东西（例如，如果值或ID等于某个东西，显示X数据），但我也被困在那里，并且需要能够在此应用程序的不同迭代中重现相同的内容创作只需更改json文件即可。希望这是有道理的，因为我觉得可以做到，而且不像我做的那么难，但是我找不到任何地方可以解决这个问题。

Javascript获取json并创建列表以及填充下拉列表

// Data Files
const dataFile = "./app/assets/data/schools.json";
const fileInput = fs.readFileSync(dataFile);
const result = JSON.parse(fileInput);

function setup() {
    loadJSON("/app/assets/data/schools.json", receivedData);
  }

  function receivedData(data) {
    console.log(data);
  }

$.each(result, function(i) { 
    var schools = result.schools;

    for (var i = 0; i < schools.length; i++) {
    console.log(schools[i].id + ' ' + schools[i].name + ' ' + schools[i].topic); 
    }
});

  $.each(result, function(i) {
    var schools = result.schools;
    var output = '';
    var menuDropdown = $("#schoolDropdown");
    console.log(schools);
    for (var i = 0; i < schools.length; i++) {
      output +=
        "<option value=" +
        schools[i].topic +
        ' ' +
        "id=" +
        schools[i].id +
        ' ' +
          "name=" +
          "dropDownItem" + 
          i +
          '">' +
        schools[i].name +
        "</option>";
      //     var word = keys[i];
      //     var score = data[word];
      //     var x = random(width);
      //     var y = random(height);
      //     fill(255);
      //     textSize(26);
      //     text(word, x, y)
    }
    menuDropdown.html(output);
  });


var dropDownTrigger = $("#schoolInfo")
dropDownTrigger.click(function(){
    var menuDropdown = $("#schoolDropdown");
    if (menuDropdown.hasClass("show")) {
        menuDropdown.removeClass("show")
    }
    else {
        menuDropdown.addClass("show");
    }
    // console.log("click event");

})

简单的HTML我想用一种表格填充#App div，该表格根据所选的选项从school.json文件生成内容

<div class="container-fluid">
  <div class="sidebar" style="margin-bottom:42px;">
    <div class="container">
      <div class="row">
        <div class="menuItem">
          <img
            src="/App/Assets/Images/lockout-logo-white.png"
            class="app-logo"
          />
        </div>
        <div class="menuItem active" id="main">
          Dashboard
        </div>
        <div style="display: flex;position:relative">
        <div class="menuItem school-dropdown" id="schoolInfo">
          School Information              
        </div>
        <select size="2" class="school-dropdown-list" id="schoolDropdown">
        </select>
      </div>
      </div>
    </div>
  </div>
</div>
<div class="container" id="App"></div>

完全卡住

对不起，我无法提供更多信息，我什至不知道该去哪里。我唯一发现的与此相关的是，根据我的选择下拉列表用元素填充另一个选择列表。那没有帮助。这可能是一种形式，或者可能是在#App div上附加了html，并在其中嵌套了json数据，任何与我所追求的类似的工作都会很有帮助。

我想让它看起来像什么？

<div id="SCHOOL_ID_FROM_JSON">
    <div class="col-4">
    <h3>SCHOOL_NAME_FROM_JSON</h3>
    <ul>
        <li>ADDRESS_FROM_JSON</li>
        <li>PRINCIPAL_FROM_JSON</li>
        <li>PHONE_FROM_JSON</li>
    </ul>
    <select>
        <options filled with ZONES_FROM_JSON>
    </select>
    </div>
    <div class="col-8">
        <img src="IMAGE_FROM_JSON based on zone selection />
    </div>
</div>

也许是一个onchange函数来更改div吗？

我认为导航选择选项上的onchange函数可以生成正确的数据，以向#App div中填充正确的信息。听起来很愚蠢，但也许背景中的表单会在输入中填充数据，然后在#App容器中使用正确的数据填充div和列表？不确定。这段视频https://www.youtube.com/watch?v=aY2pVCDcE_c从静态文件中更改了一些图片，不过我需要根据json使其动态化。

Answer 1

尝试此操作，将索引存储在data属性的数组中，并在更改时获取它：

// this will be slow if you select same element in loop,
// it's better to put it outside of the loop
var menuDropdown = $("#schoolDropdown");
var output = '';

// you had empty each because you don't access element of result
var schools = result.schools;
console.log(schools);
for (var i = 0; i < schools.length; i++) {
      output +=
        '<option value="' + schools[i].topic +
        '" data-index="' + i + '" ' +
        'id="' + schools[i].id + '" ' +
        'name="dropDownItem' + i + '">' +
        schools[i].name +
        "</option>";
  }
  // also better to have one DOM change.
  menuDropdown.html(output);

menuDropdown.change(function() {
    var value = menuDropdown.val();
    // get option based on value attribute
    var option = menuDropdown.find('option[value="' + value + '"]');
    var school = result.schools[option.data('index')];
    $('#description').html(school.description);
});