2017-09-29 21 views
0

現在システムを開発中です。このモジュールには、 "Request Certificate"というモジュールがあります。ユーザーは与えられた4つの証明書(証明書1など)の中から選択し、それを提出する前に入力する必要があります。しかし、プロットツイストがあり、フィールドは選択された証明書に基づいて異なります。selectオプション(Codeigniter)を使用してフィールドを非表示にして表示する

例:私は選択証明書1、フィールドは表示されます:名前、年齢。私の選択証明書2の場合、フィールド名、年齢、年齢などが表示されます。

管理者側では、サイドバーに「証明書の要求中」が表示されます。ここでは、管理者は証明書に要求されたすべてのユーザーを表示して印刷することができます(印刷するためにwindow.printを使用)

注:私は4つの証明書を表示するためにドロップダウンを使用しました。今、私は第1と第2の証明書をしましたが、第3と第4の証明書を選択すると、フィールドは表示されませんでした。

質問:動的な非表示と表示フィールドの作成方法は、選択したドロップダウンによって異なります。

ビュー

<select class="form-control" id="certificate" name="certificate"> 
    <option value="CertificateOne">Certificate 1</option> 
    <option value="CertificateTwo">Certificate 2</option>      
</select> 

<div class="cert_select" id="CertificateTwo"> 
    <div class="col-xs-12"> 
    <div class="form-group"> 
    <hr> 
    <h4> Certificate</h4> 
     <div class="col-xs-3"> 
     <label>First Name</label> 
     <input type="text" class="form-control" name="fname" id="fname" placeholder="Enter First Name"> 
     <div class="text-danger" id="fname_error"></div> 
    </div> 
    <div class="col-xs-3"> 
     <label>Middle Name</label> 
     <input type="text" class="form-control" name="mname" id="mname" placeholder="Enter Middle Name"> 
     <div class="text-danger" id="mname_error"></div> 
    </div> 
    <div class="col-xs-3"> 
     <label>Last Name</label> 
     <input type="text" class="form-control" name="lname" id="lname" placeholder="Enter last name"> 
     <div class="text-danger" id="lname_error"></div> 
    </div> 
</div> 

スクリプト

$(document).ready(function(){ 
    $('.cert_select').hide(); 

    $('#certificate').change(function(){ 
    $('.cert_select').hide(); 

    $('#' + $(this).val()).show(); 
    }); 
}); 

また、私はこの

ビュー

を試してみました

それは最初の証明書だけを表示し、フィールドでは、2つのdivの閉鎖、.COL-XS-12用.cert_select用と他のを忘れた

答えて

1

を示しませんでした。

<select class="form-control" id="certificate" name="certificate"> 
    <option value="CertificateOne">Certificate 1</option> 
    <option value="CertificateTwo">Certificate 2</option>  
    <option value="CertificateThree">Certificate 3</option> 
    <option value="CertificateFour">Certificate 4</option> 
</select> 
<div class="cert_select" id="CertificateOne"> 
    <div class="col-xs-12"> 
    <div class="form-group"> 
     <hr> 
     <h4> Certificate 1</h4> 
     <div class="col-xs-3"> 
      <label>First Name</label> 
      <input type="text" class="form-control" name="fname" id="fname" placeholder="Enter First Name"> 
      <div class="text-danger" id="fname_error"></div> 
     </div> 
     <div class="col-xs-3"> 
     <label>Middle Name</label> 
     <input type="text" class="form-control" name="mname" id="mname" placeholder="Enter Middle Name"> 
     <div class="text-danger" id="mname_error"></div> 
     </div> 
     <div class="col-xs-3"> 
     <label>Last Name</label> 
     <input type="text" class="form-control" name="lname" id="lname" placeholder="Enter last name"> 
     <div class="text-danger" id="lname_error"></div> 
     </div> 
    </div> 
    </div> 
</div> 

<div class="cert_select" id="CertificateTwo"> 
    <div class="col-xs-12"> 
    <div class="form-group"> 
     <hr> 
     <h4> Certificate 2</h4> 
     <div class="col-xs-3"> 
      <label>First Name</label> 
      <input type="text" class="form-control" name="fname" id="fname" placeholder="Enter First Name"> 
      <div class="text-danger" id="fname_error"></div> 
     </div> 
     <div class="col-xs-3"> 
     <label>Middle Name</label> 
     <input type="text" class="form-control" name="mname" id="mname" placeholder="Enter Middle Name"> 
     <div class="text-danger" id="mname_error"></div> 
     </div> 
     <div class="col-xs-3"> 
     <label>Last Name</label> 
     <input type="text" class="form-control" name="lname" id="lname" placeholder="Enter last name"> 
     <div class="text-danger" id="lname_error"></div> 
     </div> 
    </div> 
    </div> 
</div> 

<div class="cert_select" id="CertificateThree"> 
    <div class="col-xs-12"> 
    <div class="form-group"> 
     <hr> 
     <h4> Certificate 3</h4> 
     <div class="col-xs-3"> 
      <label>First Name</label> 
      <input type="text" class="form-control" name="fname" id="fname" placeholder="Enter First Name"> 
      <div class="text-danger" id="fname_error"></div> 
     </div> 
     <div class="col-xs-3"> 
     <label>Middle Name</label> 
     <input type="text" class="form-control" name="mname" id="mname" placeholder="Enter Middle Name"> 
     <div class="text-danger" id="mname_error"></div> 
     </div> 
     <div class="col-xs-3"> 
     <label>Last Name</label> 
     <input type="text" class="form-control" name="lname" id="lname" placeholder="Enter last name"> 
     <div class="text-danger" id="lname_error"></div> 
     </div> 
    </div> 
    </div> 
</div> 

<div class="cert_select" id="CertificateFour"> 
    <div class="col-xs-12"> 
    <div class="form-group"> 
     <hr> 
     <h4> Certificate 4</h4> 
     <div class="col-xs-3"> 
      <label>First Name</label> 
      <input type="text" class="form-control" name="fname" id="fname" placeholder="Enter First Name"> 
      <div class="text-danger" id="fname_error"></div> 
     </div> 
     <div class="col-xs-3"> 
     <label>Middle Name</label> 
     <input type="text" class="form-control" name="mname" id="mname" placeholder="Enter Middle Name"> 
     <div class="text-danger" id="mname_error"></div> 
     </div> 
     <div class="col-xs-3"> 
     <label>Last Name</label> 
     <input type="text" class="form-control" name="lname" id="lname" placeholder="Enter last name"> 
     <div class="text-danger" id="lname_error"></div> 
     </div> 
    </div> 
    </div> 
</div> 

jQueryを使ってJSの一部: https://jsfiddle.net/Lqq8ucep/

:ここ

$(document).ready(function(){ 
     $('.cert_select').hide(); 

    $('#certificate').change(function(){ 
    $('.cert_select').hide(); 
    $('#' + $(this).val()).show(); 
    }); 
}); 

は4つの証明書を持つjsfiddleです

関連する問題