Question

作为JS / JQuery的新手，我无法找到我想要的答案，所以希望有人可以提供帮助。

我正在创建一个简单的表单/清单，并希望我的40名员工能够从底部的下拉列表中选择他们的名字来应用他们的签名（姓名缩写）。 CSV中有3列，其中两列是姓名（姓和姓），第三列是姓名，例如。＆＃39;史密斯，约翰，JS＆＃39;。当他们从列表中选择他们的名字时，下拉列表将关闭并仅显示他们的姓名缩写。随着工作人员的更改，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>

下拉列表从外部列表中选择

2 个答案: