通过 EL 在 javascript 中访问模型对象列表

Question

在我的应用程序中，我想通过使用 jsp 中的选择框从控制器中获取会话中设置的模型对象的数据。

下面是我使用的实际表格

我在控制器中设置了类似的东西

List<ContactPersonEntity> contactlist = service.getAllContactPerson(1);
session.setAttribute("contactlist", contactlist);

这里是模型

    private Integer company_code;

    private Integer cp_code;

    @NotBlank
    @Size(min = 0, max = 50)
    private String cp_name;

    @NotBlank
    @Email
    @Size(min = 0, max = 50)
    private String email;

    private Integer verification_status;

    @NotBlank
    @Size(min = 0, max = 30)
    private String department;

    @NotBlank
    @Size(min = 0, max = 30)
    private String phone;    

而我的JSP是这样的

                <!--Contact Information-->
                <div class="row">
                    <div class="col-md-12">
                        <div class="box box-default">
                            <div class="box-header with-border">
                                <h3 class="box-title">Contact Information</h3>
                                <div class="box-tools pull-right">
                                    <button class="btn btn-box-tool" data-widget="collapse">
                                        <i class="fa fa-minus"></i>
                                    </button>
                                </div>
                            </div>
                            <!-- /.box-header -->
                            <div class="box-body dt-space">

                                <c:set var="phone_num" value="${contactperson.phone}" />
                                <c:set var="mail" value="${contactperson.email}" />

                                <div class="form-group">
                                    <dl class="dl-horizontal">
                                        <dt>
                                            <label>Contact Person:</label>
                                        </dt>
                                        <dd>
                                            <div class="row">
                                                <div class="col-md-8">
                                                    <select class="form-control" name="jp_entity.cp_code"
                                                        id="contact_person" onchange="chkContactPerson()" onload="onStart()">
                                                        <c:forEach items="${contactlist}" var="contactperson">
                                                            <option value="${contactperson.cp_code}">${contactperson.cp_name}</option>
                                                        </c:forEach>

                                                    </select>
                                                </div>
                                                <div class="col-md-4">
                                                    <p class="help-block">The option is required!</p>
                                                </div>
                                            </div>
                                        </dd>
                                    </dl>
                                </div>

                                <div class="form-group">
                                    <dl class="dl-horizontal">
                                        <dt>
                                            <label>Phone:</label>
                                        </dt>
                                        <dd>
                                            <div class="row">
                                                <div class="col-md-8">
                                                    <input type="text" class="form-control" name="phone"
                                                        id="phone" placeholder="Phone" disabled>
                                                </div>
                                            </div>
                                        </dd>
                                    </dl>
                                </div>


                                <div class="form-group">
                                    <dl class="dl-horizontal">
                                        <dt>
                                            <label>Email:</label>
                                        </dt>
                                        <dd>
                                            <div class="row">
                                                <div class="col-md-8">
                                                    <input type="text" class="form-control" id="email"
                                                        name="email" placeholder="Email" disabled>
                                                </div>
                                                <div class="col-md-4">
                                                    <p class="help-block">The option is required!</p>
                                                </div>
                                            </div>
                                        </dd>
                                    </dl>
                                </div>

                                <div class="form-group">
                                    <dl class="dl-horizontal">
                                        <dt>
                                            <label>Website:</label>
                                        </dt>
                                        <dd>
                                            <div class="row">
                                                <div class="col-md-8">
                                                    <textarea class="form-control text_area"
                                                        style="resize: none" id="exampleInputUser"
                                                        placeholder="Your web address here"
                                                        name="jp_entity.website"></textarea>
                                                </div>
                                                <div class="col-md-4">
                                                    <p class="help-block">The option is required!</p>
                                                </div>
                                            </div>
                                            <p class="help-block">
                                                <form:errors path="jp_entity.website" cssClass="error"></form:errors>
                                            </p>
                                        </dd>
                                    </dl>
                                </div>

                                <div class="form-group">
                                    <dl class="dl-horizontal">
                                        <dt>
                                            <label>Address:</label>
                                        </dt>
                                        <dd>
                                            <div class="row">
                                                <div class="col-md-8">
                                                    <textarea class="form-control text_area"
                                                        id="exampleInputUser" placeholder="Your address here"
                                                        name="jp_entity.address"></textarea>
                                                </div>
                                                <div class="col-md-4">
                                                    <p class="help-block">The option is required!</p>
                                                </div>
                                            </div>
                                            <p class="help-block">
                                                <form:errors path="jp_entity.address" cssClass="error"></form:errors>
                                            </p>
                                        </dd>
                                    </dl>
                                </div>

通过选择联系人，电子邮件和电话文本框中的信息将自动填充匹配信息。

问题是如何将被选中对象的信息传递给javascript？我被困在这里，我不知道如何通过 EL 将对象列表传递给 javascript，因为它完全在 2 个不同的环境中运行。如果有更好的方法，请给我指路，不过我对此很陌生。谢谢。

Answer 1

让 JSP 将这些值打印为 <option> 元素的 data 属性。

给定一个，

<select>
    <option disabled selected />
    <c:forEach items="${contacts}" var="contact">
        <option value="${contact.code}">${contact.name}</option>
    </c:forEach>
</select>

扩展如下：

<select>
    <option disabled selected />
    <c:forEach items="${contacts}" var="contact">
        <option value="${contact.code}"
                data-phone="${contact.phone}" 
                data-email="${contact.email}">${contact.name}</option>
    </c:forEach>
</select>

现在您在 HTML DOM 树中获得了所需的信息。 You can use JS to grab that information from the selected option and set it as value of the disabled inputs, when the selection has changed.

给定一个，

<select>
    ...
</select>
<input id="phone" disabled />
<input id="email" disabled />

扩展如下：

<select onchange="changeContactData(this)">
    ...
</select>
<input id="phone" disabled />
<input id="email" disabled />

function changeContactData(select) {
    var option = select.options[select.selectedIndex];
    var phone = option.getAttribute("data-phone");
    var email = option.getAttribute("data-email");

    document.getElementById("phone").value = phone;
    document.getElementById("email").value = email;
}

this 参数基本上是指当前元素的 HTML DOM 对象。因此，在<select> 元素的onchange 中，我们将<select> 元素本身传递给JS 函数。这将代表HTMLSelectElement 接口的一个实例。这其中包括options 和selectedIndex 属性，让您有机会获取当前选定的<option>。其余的应该说明一切：获取属性并将其设置为所需输入元素的值。