将ajax响应附加到select选项

Question

我发出了一个GET请求，以获取所有用户并显示姓名、姓氏、职业和Is_active，这是我的ajax请求

$.ajax({
  url: "/see/user",
  success: function(users){
    $user = $("#add_usr");
    $.each(users, function(i, user){
      userArr.push({
        'id': user.id,
        'firstName': user.profile.FirstName,
        'lastName': user.profile.LastName,
        'fullName': user.profile.FirstName + ' ' + user.profile.LastName,
        'profesion': user.profesion,
        'Is_active': user.Is_active

      });
    });

现在我希望所有的职业，用户必须将它附加到我的选择选择器，而不是被复制，例如。我的ajax请求中有3个用户，第一个职业是管道工、第二个程序员和第三个教师，我希望这三个职业出现在我的select选择器中，因为我想通过profesion过滤用户，而我现在不知道如何启动它，提前谢谢

Answer 1

您必须执行以下操作：

• 提取所有职业(例如，使用地图)并对其进行排序和删除duplicates
• Create

这里是怎么做的

​

function extractProfessions(userArr) {
  return userArr
      .map(function(el) {
        return el.profession
      })
      .sort()
      .filter(function(el,i,a) {
        return i==a.indexOf(el);
      });
}

​

您可以从ajax回调函数内部调用此函数

$.ajax({
  url: "/see/user",
  success: function(users){
    $user = $("#add_usr");
    var userArr = []; // YOU DIDN'T HAVE THIS IN YOUR ORIGINAL CODE
    $.each(users, function(i, user){
      userArr.push({
        'id': user.id,
        'firstName': user.profile.FirstName,
        'lastName': user.profile.LastName,
        'fullName': user.profile.FirstName + ' ' + user.profile.LastName,
        'profesion': user.profesion,
        'Is_active': user.Is_active

      });
      var professions = extractProfessions(userArr); // HERE!!!
    });

然后将结果添加到select。

Answer 2

使用已有的内容，您可以使用另一个数组并将其命名为options，以存储所有唯一的数组，然后填充您的元素。通过这样做，当您调用此ajax请求时，您可以选择menu will always refresh。

    $.ajax({
      url: "/see/user",
      success: function(users){
        $user = $("#add_usr");
        var options = [];

        $.each(users, function(i, user){
          /* HERE WE CREATE AN OPTIONS LIST FOR THE SELECT*/
          if (-1 != options.indexOf (user.profesion))
            options.push (user.profesion);


          userArr.push({
            'id': user.id,
            'firstName': user.profile.FirstName,
            'lastName': user.profile.LastName,
            'fullName': user.profile.FirstName + ' ' + user.profile.LastName,
            'profesion': user.profesion,
            'Is_active': user.Is_active

          });

          /* HERE WHEN FINISHED YOU CAN POPULATE THE SELECT MENU WITH THESE*/
          $ ('#SELECT_ELEMENT').html (''); // FIRST CLEAR IT

          /* THEN POPULATE IT */
          $.each (options, function (k, v) {
            $ ('#SELECT_ELEMENT').append (v);
          });


        });