現在システムを開発中です。このモジュールには、 "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用と他のを忘れた