在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>。其餘部分應該說明問題：抓住屬性並將其設置爲所需輸入元素的值。