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

Posted 2023-03-07

【中文标题】如何获取选择选项的值，并使用它来查询数组，以填充另一个输入

【英文标题】：How to get the value of a select option, and use it to query an array, to populate another input

【发布时间】：2019-07-01 03:38:59

【问题描述】：

如何使用由forEach 循环生成的选择输入选项的值来获取同一数组对象中另一个属性的值，并将其设置为另一个输入的值？

对不起，如果这很罗嗦，或者它已经在某个地方得到了回答，但我找不到答案，而且我整天都在敲我的脑袋（这也是我关于 SO 的第一个问题，所以请多多包涵）。

我在一个学费安排应用程序中有一个页面。 在服务器上查询数据库后，我将一组学生传递到页面。 数组中的学生有各种属性，与本案例相关的是id、name和postcode。

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

在日程安排页面上，我有一个用于创建新课程的表格。 表格上有 2 个输入。 第一个输入是一个选择列表，用于从数组中选择一个学生。 第二个输入是学生邮政编码的文本字段。 select 中的选项由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

我尝试了下面的代码，它将 var found 设置为与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="">

【问题讨论】：

写得很好，但是 sn-p 或 fiddle 会更容易:)

不清楚你想要动态什么或者你想要什么。

我想让id显示为“3”动态 item.id === "3"); %> 通过在脚本标签内使用 jQuery 的 idVariable。我正在努力将 idVariable 的值纳入 find() 函数

【参考方案1】：

这里的问题是您没有将 postcode 值存储在您的 ejs 文件中的某个位置，因此您无法访问这些值。 一种解决方案是将呈现的 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);
);

我不确定这是否正是你想要的，但我想我给了你一个想法。

【讨论】：

所以目前我有控制器传入的学生数组。但不像我认为的 JSON。我会试一试并报告。

效果很好！太感谢了。我所要做的就是将数组作为 JSON 传递，以便能够在 jquery 代码中访问它。