數據庫已填充的鏈接下拉菜單

我已經創建了此JSP頁面，其中所有下拉菜單都從數據庫填充。此功能正常工作我已經測試過它。但是現在我需要添加一個函數，這樣第三個下拉菜單（這是Forecast ISC）在我從第一個菜單中選擇某個字段時才變得可見，這是「Type」。到目前爲止，我還沒有創建任何Java腳本，因爲這是我需要幫助！任何建議或意見將有所幫助！數據庫已填充的鏈接下拉菜單

<form:form action="/analysis/analysisSummary" modelAttribute="shipData" 
    method="POST" onChange = 'checkType()'> 
    <br> 
    <table width="100%"> 
     <tr> 
      <td width="20%"></td> 
      <td width="20%">Type:<form:select id="type" path="type"> 
      <form:option value="All">------ All ------ </form:option> 
     <form:options items="${analysisEvents}" itemLabel="description" 
         itemValue="code" /> 
       </form:select> 
      </td> 


      <td width="20%">Forecast ISC:<form:select id="iscCode" 
        path="iscCode"> 
        <form:option value="All">ALL</form:option> 
        <form:options items="${iscCodes}" /> 
       </form:select> 
      </td> 

      <td width="30%"><div style="visibility: hidden"> 
        Actual ISC: <form:select id="sctry" 
        path="iscCode"> 
        <form:option value="All">ALL</form:option> 
        <form:options items="${iscCodes}" /> 
       </form:select> 
       </div> 
      </td>

HTML：

 <form id="shipData" onChange="checkType()" action="/analysis/analysisSummary" method="POST"> 
    <br> 
    <table width="100%"> 
     <tr> 
      <td width="20%"></td> 
      <td width="20%">Type:<select id="type" name="type"> 
        <option value="All">------ All ------</option> 
        <option value="U">Unanalyzed</option><option value="H">Pending</option><option value="F">True Hit</option><option value="C">Return Reason</option><option value="S">Parcel Returned</option><option value="T">Long Term Pending</option><option value="Z">Value &gt;2500</option> 
       </select> 
      </td> 


      <td width="20%">Forecast ISC:<select id="iscCode" name="iscCode"> 
        <option value="All">ALL</option> 
        <option value="JFK">JFK</option><option value="LAX">LAX</option><option value="MIA">MIA</option><option value="ORD">ORD</option><option value="SFO">SFO</option> 
       </select> 
      </td> 

      <td width="30%"><div style="visibility: hidden"> 
        Actual ISC: <select id="sctry" name="iscCode"> 
        <option value="All">ALL</option> 
        <option value="JFK">JFK</option><option value="LAX">LAX</option><option value="MIA">MIA</option><option value="ORD">ORD</option><option value="SFO">SFO</option> 
       </select> 
       </div> 
      </td> 
      <td width="8%"></td> 
     </tr> 
    </table> 
    <br> 
    <table width="100%"> 
     <tr> 

      <td width="20%"></td>

來源

2013-02-11 Fahad

你需要做的第一件事是簡化的問題。這個問題與Java或JSP沒有任何關係，這與jQuery和JavaScript有關。您可以在JSP呈現之後發佈HTML嗎？ – 2013-02-11 18:03:20

對不起，我編輯了我的問題！因此，基本上當用戶從「type」下拉菜單中選擇「Long Term Pending」時，第三下拉菜單應該出現。 – Fahad 2013-02-11 18:16:06

$(document).ready(function() { 
     $('#shipData').find('#type').change(function() { 
      if ($(this).val() == 'T') { 
       $('#shipData').find('#divIscCode').show(); //To show only drop down 
       //$('#shipData').find('#sctry').val('All'); //To initial value if required. 
      } else { 
       $('#shipData').find('#divIscCode').hide(); 
      } 
     }).trigger('change'); 
    });

對於DEMO

來源

2013-02-11 18:31:18 Thulasiram

謝謝@ThulasiRam – Fahad 2013-02-11 18:43:32

我試過這段代碼，但由於某種原因，它不工作。您在網站上的演示有效，但在我的結尾無法使用。記住這些下拉列表是從數據庫填充的。此代碼僅適用於硬編碼下拉列表中的所有字段。 – Fahad 2013-02-13 17:30:45

@Fahad： - 對於表單id =「shipData」，對於類型下拉id =「type」就像這樣三個id #shipData，#type，#divIscCode應該在JSP呈現後存在。你使用的是什麼版本的jQuery？ – Thulasiram 2013-02-14 07:23:36

數據庫已填充的鏈接下拉菜單

回答

相關問題