Как получить значение параметра выбора и использовать его для запроса массива, чтобы заполнить другой ввод - PullRequest
Новая
       5

Как получить значение параметра выбора и использовать его для запроса массива, чтобы заполнить другой ввод

0 голосов
/ 07 февраля 2019

Как я могу использовать значение параметра выбора ввода, сгенерированного циклом forEach, чтобы получить значение другого свойства в том же объекте массива и установить его в качестве значения другого ввода?

Извините, если это многословно или на него уже где-то ответили, но я не могу найти ответ, и я весь день колотил головой (также это мой первый вопрос по SO, поэтому, пожалуйста, потерпите меня).

У меня есть страница в приложении для планирования обучения.После запроса базы данных на сервере, я передаю массив студентов на страницу.Студенты в массиве имеют различные свойства, для этого случая важны идентификатор, имя и почтовый индекс. 


students = [
    {id: 1, name: 'test1', postcode: 'AB1 1CD'},
    {id: 2, name: 'test2', postcode: 'AB2 2CD'},
    {id: 3, name: 'test3', postcode: 'AB3 3CD'}
]

На странице планирования у меня есть форма для создания нового урока.На форме есть 2 входа.Первый вход - это список выбора, чтобы выбрать ученика из массива.Вторым вводом является текстовое поле для почтового индекса студентов.Параметры выбора выбираются циклом forEach, который просматривает массив студентов, отображает имена и устанавливает значение каждого параметра равным идентификатору студентов.(Мне нужно, чтобы значение оставалось идентификатором) 


<select name="student" id="studentInput">
    <% students.forEach(function(student){ %>
        <option value="<%=student.id%>"> <%=student.name%> </option>
    <% }); %>
</select>

Мне также нужно получить почтовый индекс от студента в массиве и заполнить текстовое поле почтового индекса.Вот где я в тупике. 


<input type="text" id="postcodeInput" name="postcode">

Я использовал jQuery для получения идентификатора из опции, когда она была изменена, и я могу заполнить поле почтового индекса идентификатором (в качестве теста), который работает нормально,


<script>
    $(document).on("change", "#studentInput", function() {
        var idVariable = $(this).val()
        $("#postcodeInput").val(idVariable);
    });
</script>

Приведенный выше код дает мне значение student.id в виде строки в поле почтового индекса, тогда как мне нужен student.postcode

Я пробовал приведенный ниже код, который устанавливает переменную found в качестве студента, соответствующего id === 3 


<% found = student.find(item => item.id === "3"); %>
`

, что позволяет мне установить входное значение как found.postcode


<input type="text" id="postcodeInput" name="postcode" value="<%=found.postcode%>">
`

Это дает мне почтовый индекс 'AB3 3CD' в качествезначение текстового поля.Отлично.

Но это с жестко идентифицированным идентификатором.Как сделать этот бит динамическим?

Я пытался использовать jQuery, но я не могу получить доступ к массиву, плавающему в html, из тегов скрипта.Либо он недоступен, либо мне не хватает подвоха.

Есть идеи?Заранее спасибо! 

students = [
    {id: 1, name: 'test1', postcode: 'AB1 1CD'},
    {id: 2, name: 'test2', postcode: 'AB2 2CD'},
    {id: 3, name: 'test3', postcode: 'AB3 3CD'}
];

$(document).on("change", "#studentInput", function() {
    var idVariable = $(this).val()
    $("#postcodeInput").val(idVariable);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="student" id="studentInput">
    <% students.forEach(function(student){ %>
        <option value="1"> test1 </option>
        <option value="2"> test2 </option>
        <option value="3"> test3 </option>
    <% }); %>
</select>

<input type="text" id="postcodeInput" name="postcode" value="">

1 Ответ

0 голосов
/ 07 февраля 2019

Проблема здесь в том, что ваши postcode значения не хранятся где-то в вашем файле ejs, поэтому вы не можете получить доступ к этим значениям.
Одним из решений является сохранение отображенного массива students в объекте javascript., чтобы иметь возможность доступа к его значениям.Как это сделать?
Сначала в вашем контроллере вы должны отобразить новый массив в виде строки JSON следующим образом. 

res.render("someEjs", { students: students, jsonStudents: JSON.stringify(students)});

Затем в вашем файле ejs вы можете сохранить массив json в переменной js, напримерthis: 

var students = JSON.parse('<%- jsonStudents %>');

Теперь с помощью JavaScript или кода JQuery у вас есть доступ к postcode значениям.Например: 

$(document).on("change", "#studentInput", function() {
    var idVariable = $(this).val()
    var postCodeVal;
    for (var x of students) {
        if (x.id === idVariable) {
            postCodeVal = x.postcode;
        }
     }
    $("#postcodeInput").val(postCodeVal);
});

Я не уверен, что это именно то, что вы хотите, но я думаю, что дал вам идею.

...