从外部列表下拉选择

Question

作为JS/JQuery的新手，我找不到我想要的答案，所以希望有人能帮上忙。

我正在创建一个简单的表单/核对表，希望我的40名员工中的每个人都能够从底部的下拉列表中选择自己的名字来应用他们的签名(缩写)。CSV中将有3列，其中两列是他们的名字(姓氏和名字)，第三列是他们的首字母，例如。“史密斯，约翰，JS”当他们从列表中选择他们的名字时，下拉菜单将关闭，只显示他们名字的首字母。随着人员的变化，CSV对我来说更容易远程更新。

我找到了很多使用PHP和AJAX的方法，但我认为JQuery可以做到这一点？

希望这是有意义的。

Answer 1

如果您乐于将数据存储为JSON而不是CSV，那么下面这样的代码将会非常好用。这也可以用CSV完成，但除非有充分的理由使用CSV，否则我个人会选择JSON。

​

$(document).ready(function() {
  vals = $.getJSON('https://jsonblob.com/api/722aba1f-1580-11e8-aee7-670a824b2c57', function(data) {
    data.forEach(function(e) {
      $("#initials").append('<option value="' + e.initials + '">' + e.forename + ' ' + e.surname + '</option>')
    });

    $("#initials").change(function() {
       $("#initials-display").text($("#initials").val());
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="initials">
</select>
<div id="initials-display"></div>

​

Answer 2

这将从一个JSON文件(data/stafflist.json)中读取数据/列表，将该列表添加到我的下拉列表中，然后在另一个div中显示该员工的相关姓名缩写。

​

$(document).ready(function() {
  vals = $.getJSON('data/stafflist.json', function(data) {
    data.forEach(function(e) {
      $("#initials").append('<option value="' + e.initials + '">' + e.forename + ' ' + e.surname + '</option>')
    });

    $("#initials").change(function() {
       $("#initials-display").text($("#initials").val());
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="initials">
</select>
<div id="initials-display"></div>

​