最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

运维笔记admin7浏览0评论

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

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

如何使用一个选择输入选项的值,由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=".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="">
回答如下:

这里的问题是,你没有地方存储在您的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);
});

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

发布评论

评论列表(0)

  1. 暂无评论