代码之家 › 专栏 › 技术社区 › Eden WebStudio

Ajax成功后,将数组/多选数据放置在模式中

ajax jquery javascript

Eden WebStudio · 技术社区 · 9 年前

Object {employees: Object}
employees:Object
data: Array(2)
0: Object
id: 1
name: "Sam Test 1"
__proto__: Object
1: Object
id: 2
name: "Joe Test 2"
__proto__: Object

我的ajax调用如下:

$(document).ready(function() {
  $('.editApptModal-button').click(function() {
    var appointmentID = $(this).attr('data-appointmentID');
    console.log(appointmentID);
    $.ajax({
      type: 'ajax',
      method: 'get',
      url: '/ajax',
      async: false,
      dataType: 'json',
      success: function(response) {
        console.log(response);
        $.each(response.employees.data, function(key, value) {
          $('select').append($("<option/>", {
            value: key,
            text: value
          }));
        });

        $('#editApptModal').modal('show');
      },
      error: function(response) {
        alert('Could not displaying data' + response);
      }
    });
  });
});

那么,我需要在这里做什么才能将id放入选项值,将名称放入选项文本?

$.each(response.employee.data, function(key, value) {
  $('select').append($("<option/>", {
    value: key,
    text: value
  }));
});

具有 console.log(JSON.stringify(response));

{
    "employees": {
        "data": [{
            "id": 1,
            "name": "Sam Test 1"
        }, {
            "id": 2,
            "name": "Joe Test 2"
        }]
    }
}

选择框

<select multiple="multiple" name="employees" class="form-control search-select">    
  <option value=""></option>
</select>

2 回复 | 直到 9 年前

Dij 9 年前

你需要这样做:

$.each(response.employees.data, function(key, value) {
    $('select').append($("<option>", {
     value: value.id,
     text: value.name
       }));
   });

Danny Fardy Jhonston Bermúdez 9 年前

改变 response.employee.data response.employees.data .

您可以使用 value

(function() {
  var data = {
    "employees": {
      "data": [{
        "id": 1,
        "name": "Sam Test 1"
      }, {
        "id": 2,
        "name": "Joe Test 2"
      }]
    }
  };
  $.each(data.employees.data, function(key, value) {
    $('select').append($("<option/>", {
      value: value.id,
      text: value.name
    }));
  });
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select multiple="multiple" name="employees" class="form-control search-select">    
 <option value=""></option>
</select>

这是显示选定值的方式。

(function() {
  var data = {
    "employees": {
      "data": [{
        "id": 1,
        "name": "Sam Test 1"
      }, {
        "id": 2,
        "name": "Joe Test 2"
      }]
    }
  };
  $.each(data.employees.data, function(key, value) {
    $('select').append($("<option/>", {
      value: value.id,
      text: value.name
    }));
  });

  $("select[name=employees]").on("change", function() {
    $("#result").html("Selected values: " + $(this).val().join("\n"));
  });
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select multiple="multiple" name="employees" class="form-control search-select">
</select>
<div id="result"></div>

使用jQuery.select2显示所选数据。

(function() {
  var data = {
    "employees": {
      "data": [{
        "id": 1,
        "name": "Sam Test 1"
      }, {
        "id": 2,
        "name": "Joe Test 2"
      }, {
        "id": 3,
        "name": "Joe Test 3"
      }, {
        "id": 4,
        "name": "Joe Test 4"
      }]
    }
  };
  $.each(data.employees.data, function(key, value) {
    $('select').append($("<option/>", {
      value: value.id,
      text: value.name
    }));
  });
  $("select[name=employees]").val(data.employees.data.map(function(x) {
    return x.id;
  })); // Set the selected data before show it.
  $('select').select2();
})();

select[name=employees] {
  width: 200px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<select name="employees" multiple="multiple"></select>