在javascript中通过EL访问模型对象的lisf

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树所需的信息。当选择发生变化时，您可以使用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>元素中，我们将<select>元素本身传递给JS函数。这将代表HTMLSelectElement接口的一个实例。其中包括options和selectedIndex属性，使您有机会获取当前选择的<option>。其余部分应该说明问题：抓住属性并将其设置为所需输入元素的值。