成功放置陣列/多選數據後模式Ajax

Question

我正在進行Ajax調用，該調用返回一個員工姓名和ID。這些是我希望在Modal彈出窗口的多選框中提供的陣列。如果可能，我也希望展示選定的價值？

我的控制檯日誌顯示：

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> 

Answer 1

變化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>

如果沒有需要有一個空的選項，刪除你的HTML的默認選項。 這是顯示選定值的方式。

(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：顯示與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>

Answer 2

你需要做的是這樣的：

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