如何获得一个选择选项的值，并用它来查询一个数组，填充另一个输入

Question

如何使用一个选择输入选项的值，由forEach回路中产生，要得到另一个属性的值相同的数组对象，并将它设置为另一个输入的值？

很抱歉，如果这是罗嗦或它已经某处回答，但我不能找到答案，我一直整天敲我的头（也这是我的第一个问题上如此，所以请多多包涵）。

我有一个学费调度应用程序的页面。在服务器上查询数据库后，我通过同学的阵列到页面。数组中的学生有不同的性质，有关此情况下的有ID，姓名和邮编。

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

在调度的网页我有用于创建新的课的形式。上的形式有2个输入端。首先输入是一个选择列表，选择从阵列中的学生。第二个输入是为学生邮政编码的文本字段。在选择的选项由forEach环路，它通过学生的阵列循环产生，显示名称，并设置每个选项是学生id的值。 （我需要的值保持ID）

<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的，当它改变时，从选项获得ID，我都可以通过ID（作为测试），它工作正常填充邮政编码场。

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

上面的代码给我student.id值作为邮政编码字段中输入字符串，而我需要student.postcode

我想下面的代码将作为学生对应found了var id === 3

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

这让我设置的输入值found.postcode

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

这给了我邮政编码“AB3 3CD”作为文本字段值。完善。

但是，这是一个硬编码的ID。如何使该位动态？

我试着使用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="">

Answer 1

这里的问题是，你没有地方存储在您的EJS文件的postcode值，所以你不能访问这些值。 一种解决方案是所渲染的students阵列保存在javascript对象，以便能够访问其值。这个怎么做？ 首先在你的控制器，你必须使新的数组作为JSON字符串这样。

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

然后在你的EJS文件，您可以JSON数组存储在这样一个js变量：

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

我不知道这是否是你想要什么，但我想我给你出个主意。