Как заполнить объект
Есть страница представления, на которой есть объект (id="StreetId").
<div class="row">
<input type="hidden" id="RequestVerificationToken"
name="RequestVerificationToken" value="@GetAntiXsrfRequestToken()">
<div class="col-md-4">
<form asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="CityId" class="control-label"></label>
<select id="CityId" asp-for="CityId" class="form-control" asp-items="ViewBag.CityId"></select>
</di>
<div class="form-group">
<label asp-for="StreetId" class="control-label"></label>
<select id="StreetId" asp-for="StreetId" class="form-control" asp-items="ViewBag.GetStreets"></select>
</div>
</div>
</div>
Данный объект после изменения объекта с id="CityId" должен обновиться новыми данными пришедшими с сервера в формате json, для чего была написана функция:
$(function () {
$("#CityId").change(function () {
var formData = { 'CityId': Number.parseInt($('#CityId').val()), 'NameCity': ''};
$.ajax({
url: "http://localhost:18246/api/streetsAPI/searchStreets",
headers:
{
'Accept': 'application/json',
'Content-Type': 'application/json',
'RequestVerificationToken': $('#RequestVerificationToken').val()
},
type: 'POST',
dataType: "json",
data: JSON.stringify(formData),
success: function (data) {
var streets = $('#StreetId');
streets.empty();
$.each(data, function (index, street) {
//streets.append($('<option/>',
// {
// value: street.IdStreet,
// text: street.Name
// }));
$('<option>').val(key).text(value).appendTo(streets);
});
// for (var i = 0; i < data.length; i++) {
// $streets.append('<option value = ' + data[i].IdStreet + '>' + data[i].Name + '</option>');
// }
},
error: function (result, status, er) {
alert("error: " + result + " status: " + status + " er:" + er);
}
});
});
});
Функция срабатывает, данные в json приходят, но объект ими почему-то не заполняется. Пробовал 3 варианта заполнения: 1)
for (var i = 0; i < data.length; i++) {
$streets.append('<option value = ' + data[i].IdStreet + '>' + data[i].Name + '</option>');
}
$.each(data, function (index, street) {
$('<option>').val(key).text(value).appendTo(streets);
});
$.each(data, function (index, street) {
streets.append($('<option/>',
{
value: street.IdStreet,
text: street.Name
}));
});
Но не один не отработал как нужно - был либо пустой, подозреваю, что не прописалось значение представления (text), либо undefind.
Почему так и как здесь правильней будет заполнить?
Ошибка при попытке взятия значения свойства text объекта select:
Create:270 Uncaught TypeError: "#StreetId>option".get is not a function at HTMLSelectElement. (Create:270) at HTMLSelectElement.dispatch (VM17 jquery.min.js:2) at HTMLSelectElement.v.handle (VM17 jquery.min.js:2) (anonymous) @ Create:270 dispatch @ jquery.min.js:2 v.handle @ jquery.min.js:2