在 Laravel 4 中使用 AJAX/JSON 的 JavaScript/jQuery 问题

Question

我希望你能用这个为我指明正确的方向。

我有以下 JavaScript：

var url = '/admin/list-contacts';

var contacts;

$.ajax({
    async: false,
    type: 'GET',
    url: url,
    dataType: 'json',
    success : function(data) { contacts = data; }
});

var accountId = $('#account_id option:selected').val();

if(accountId === 'NULL') {
    $('.delegates .contacts, .delegates .delegate_status_id, .delegates .event_id, .delegates .price, .opportunities .contacts, .notes .contacts').hide();
} else {
    $('.delegates .contacts, .delegates .delegate_status_id, .delegates .event_id, .delegates .price, .opportunities .contacts, .notes .contacts').show();
}

$('#account_id').change(function() {
    select = $("<select name='contact_id' id='contact_id'>");


    for(var i in contacts) {
        if(contacts[i]['account_id'] === $(this).val()) {
            select.append('<option value="' + contacts[i]['id'] + '">' + contacts[i]['name'] + '</option>');
        } else {
            select.html('<option value="NULL">No Contacts</option>');
        }
    }

    var accountId = $('#account_id option:selected').val();

    if(accountId === 'NULL') {
        $('.delegates .contacts, .delegates .delegate_status_id, .delegates .event_id, .delegates .price, .opportunities .contacts, .notes .contacts').hide();
        $('.delegates .contacts .controls, .opportunities .contacts .controls, .notes .contacts .controls').html('');
    } else {
        $('.delegates .contacts, .delegates .delegate_status_id, .delegates .event_id, .delegates .price, .opportunities .contacts, .notes .contacts').show();
        $('.delegates .contacts .controls, .opportunities .contacts .controls, .notes .contacts .controls').html(select);
    }

});

基本上，它正在做的是通过 JSON 使用 Laravel 4 中的此代码提取联系人列表：

public function contacts()
{
    return Contact::select('contacts.id', 'contacts.account_id', DB::raw('concat(contacts.first_name," ",contacts.last_name) AS name'))->get();
}

一切顺利，联系人变量填充了正确的数据，并且我在整个过程中，我在控制台中记录了该变量的结果，并且在选择框中更改时，它包含正确的数据.问题在于 for 循环中的 if 语句。

如果系统中只有 1 个有联系人的帐户，则它可以正常工作，并且所有联系人都被拉出。一旦您添加另一个帐户，它就会失败并恢复使用 else 语句中的代码。有趣的是，您删除了 if 语句的 else 部分，它可以完美运行。不过，我需要“无联系人”位，以表明如果帐户没有联系人，则表明没有联系人。

各位有什么想法吗？

编辑：我应该提到，联系人下拉列表的数量取决于先前包含系统中帐户的下拉列表。 JavaScript 检查所选帐户的 ID 并提取正确的联系人。

Answer 1

问题在于当您有多个值时循环的工作方式。如果所有联系人都与所选帐户匹配，则没关系，因为 if 部分是唯一被执行的位。但是，如果曾经执行过 else 部分，则您将删除为成功匹配添加的任何内容。

我不使用if else 结构，而是执行以下操作：

for (var i in contacts) {
    if (contacts[i]['account_id'] === this.value) {
        select.append('<option value="' + contacts[i]['id'] + '">' + contacts[i]['name'] + '</option>');
    }
}

if(select.find('option').length === 0) {
    select.html('<option value="NULL">No Contacts</option>');
}

这会查看您的所有联系人，找到匹配的联系人并将其添加到您的 <select> 元素中。然后，在检查完所有联系人后，它会检查是否有任何联系人添加到 <select> 元素中 - 如果没有，它会添加一个“无联系人”选项。