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);
    }

});

基本上，它正在做的是使用Laravel 4中的以下代碼通過JSON提取聯系人列表：

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

很好，好了，contacts變量中填充了正確的數據，並且在整個過程中，我已將該變量的結果記錄在控制台中，當對選擇框進行更改時，它包含正確的數據。 問題是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>元素中-如果沒有添加任何元素，則會向其中添加一個“無聯系人”選項。