在 javascript 中通过 EL 访问模型对象列表
Access to lisf of model object by EL in javascript
在我的应用程序中，我想通过使用 jsp 中的 select 框从控制器获取在会话中设置的模型对象的数据。
下面是我使用的实际表格
我在我的控制器中设置了这样的东西
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>
通过select联系人，电子邮件中的信息和phone文本框将自动填充匹配信息。
问题是如何将正在 selected 的对象的信息传递给 javascript？我被困在这里，我不知道如何通过 EL 将对象列表传递给 javascript，因为它在 2 个不同的环境中完全 运行。如果有更好的方法，请告诉我方法，虽然我对此很陌生。谢谢。
让 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 树中有了所需的信息。您可以使用JS从选定的选项中获取该信息，并将其设置为禁用输入的值。
给定一个，
<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>。其余的应该不言而喻：获取属性并将其设置为所需输入元素的值。
在我的应用程序中，我想通过使用 jsp 中的 select 框从控制器获取在会话中设置的模型对象的数据。
下面是我使用的实际表格
我在我的控制器中设置了这样的东西
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>
通过select联系人，电子邮件中的信息和phone文本框将自动填充匹配信息。
问题是如何将正在 selected 的对象的信息传递给 javascript？我被困在这里，我不知道如何通过 EL 将对象列表传递给 javascript，因为它在 2 个不同的环境中完全 运行。如果有更好的方法，请告诉我方法，虽然我对此很陌生。谢谢。
让 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 树中有了所需的信息。您可以使用JS从选定的选项中获取该信息，并将其设置为禁用输入的值。
给定一个，
<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>。其余的应该不言而喻：获取属性并将其设置为所需输入元素的值。