<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class=" well col-xs-6 col-md-3"> RM234567</br> <b>Permata Sari</b></br> 29 tahun / 23 Jan 1986 <hr> <ul class="nav nav-pills nav-stacked"> <li role="presentation"><a href="#"><span class="glyphicon glyphicon-dashboard" aria-hidden="true"></span> Dashboard</a></li> <li role="presentation" class="active"><a href="#"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span> Catatan Medis</a></li> <li role="presentation"><a href="#"><span class="glyphicon glyphicon-file" aria-hidden="true"></span> Rekam Medis</a></li> <li role="presentation"><a href="#"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> Diagnosis</a></li> <li role="presentation" ><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span> Tindakan Medis</a></li> <li role="presentation"><a href="#"><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span> Hasil Radiologi</a></li> </ul> </div> <div class=" col-xs-12 col-sm-6 col-md-9"> <h3><span class="glyphicon glyphicon-edit" aria-hidden="true"></span> Catatan Medis</h3> <div class="panel panel-default"> <div class="panel-heading"> <h4>Tertulis</h4> </div> <table class="table"> <thead> <tr> <th>Tanggal - Jam</th> <th>Nama Dokter</th> <th>Nama Catatan Medis</th> <th>Status</th> </tr> </thead> <tbody> <tr> <td>23/Feb/15 - 09:23</td> <td>dr. Panji Setioaji</td> <td><a href="#" data-toggle="modal" data-target="#asesmenTriaseModal">Asesmen Triase</a></td> <td>Tersimpan</td> </tr> <tr> <td>23/Feb/15 - 10:05</td> <td>dr. Silvia Nurahman</td> <td><a href="#" data-toggle="modal" data-target="#asesmenAwalPasienGawatDaruratModal">Asesmen Awal Pasien Gawat Darurat</a></td> <td>Draft</td> </tr> </tbody> </table> </div> <div class="panel panel-default"> <div class="panel-heading"> <div class="row"> <div class="col-md-7"> <h4>Buat Baru (Pilih Template)</h4> </div> <div class="form-inline"> <select class="form-control selectTemplate"> <option value="asesmenUmum">Asesmen umum</option> <option value="asesmenAwalPasienGawatDarurat">Asesmen awal pasien gawat darurat</option> <option value="asesmenAwalPasienRawatInap">Asesmen awal pasien rawat inap</option> <option value="asesmenAwalPasienRawatJalan">Asesmen awal pasien rawat jalan</option> <option value="asesmenTriase">Asesmen triase</option> </select> </div> </div> </div> <div class="panel-body"> <div class="medicalTemplate asesmenUmum"> <center><h4>Asesmen umum</h4></center> <form> <textarea class="form-control" placeholder="Deskripsi SOAP" rows="3"></textarea> <div class="modal-footer"> <button type="button" class="btn btn-primary">Simpan sebagai draft</button> <button type="button" class="btn btn-primary">Simpan selamanya</button> </div> </form> </div> <div class="medicalTemplate asesmenAwalPasienGawatDarurat"> <form > <div contentEditable="true" class="medicalTemplateContent"> <center><h4>Asesmen Awal Pasien Gawat Darurat</h4></center> <hr> <center>PERAWAT / BIDAN </center> <b>Alergi:</b> Tidak ada / Ada ____ </br> <b>Skor nyeri:</b> metode VAS / Wong Baker / CPOT ___ </br> <b>TD:</b> ___ mmHg       <b>Nadi:</b>___ /menit       <b>RR:</b> ___ /menit       <b>Suhu:</b> ___ °C       <hr> <center>DOKTER </center> <b>Survey Primer dan Manajemen Kegawatdaruratan:</b> </br> </br> </br> <b>Survey Sekunder:</b> </br> Riwayat didapatkan dari: Auto-anamnesa / Allo-anamnesa dengan Nama: ______ hubungan dengan pasien ____ </br> Keluhan utama: </br> Perjalanan penyakit: </br> </br> </br> Obat-obatan yang sedang dikonsumsi dan/atau dibawa pasien saat ini: </br> </br> Hasil pemeriksaan penunjang yang sudah ada: </br> </br></br></br> <b>Pemeriksaan Fisik:</b> </br> <u>Status General</u> </br>    Kondisi Umum: Baik / Tampak Sakit / Sesak / Pucat / Lemah / Kejang / Lainnya ___ </br>    Sistem Kardiorespirasi: </br></br></br> <u>Status Lokalis</u> (Pemeriksaan terkait keluhan saat ini) </br></br></br> <hr> <center>DOKTER DAN PERAWAT / BIDAN</center> </br> <b>Informasi tambahan:</b> </br></br></br> <b>Daftar Masalah Medis:</b> </br></br></br> <b>Daftar Masalah Keperawatan:</b> </br></br></br> <b>Diagnosis Kerja / Diagnosis Banding:</b> </br></br></br> <b>Instruksi Awal Dokter:</b> </br></br></br> <b>Rencana Tindakan Keperawatan Gawat Darurat:</b> </br></br></br> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary">Simpan sebagai draft</button> <button type="button" class="btn btn-primary">Simpan selamanya</button> </div> </form> </div> <div class="medicalTemplate asesmenAwalPasienRawatInap"> <form> <center><h4>Asesmen Awal Pasien Rawat Inap</h4></center> <div contentEditable="true" class="medicalTemplateContent"> </br></br></br></br> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary">Simpan sebagai draft</button> <button type="button" class="btn btn-primary">Simpan selamanya</button> </div> </form> </div> <div class="medicalTemplate asesmenAwalPasienRawatJalan"> <form> <center><h4>Asesmen Awal Pasien Rawat Jalan</h4></center> <div contentEditable="true" class="medicalTemplateContent"> </br></br></br></br> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary">Simpan sebagai draft</button> <button type="button" class="btn btn-primary">Simpan selamanya</button> </div> </form> </div> <div class="medicalTemplate asesmenTriase"> <form> <center><h4>Asesmen Triase</h4></center> <div contentEditable="true" class="medicalTemplateContent"> </br></br></br></br> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary">Simpan sebagai draft</button> <button type="button" class="btn btn-primary">Simpan selamanya</button> </div> </form> </div> </div> </div> </div> </div> <!-- Modal --> <div class="modal fade" id="asesmenTriaseModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel"><center>Asesmen Triase</center></h4> </div> <div class="modal-body"> 23/Feb/15 - 09:23 </br> dr. Panji Setioaji</br> </br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> </div> </div> <!-- Modal --> <div class="modal fade" id="asesmenAwalPasienGawatDaruratModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel"><center>Asesmen Awal Pasien Gawat Darurat</center></h4> </div> <div class="modal-body"> 23/Feb/15 - 10:05 </br> dr. Silvia Nurahman </br></br> <div contentEditable="true"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">Simpan sebagai draft</button> <button type="button" class="btn btn-primary">Simpan selamanya</button> </div> </div> </div> </div>

.medicalTemplate { display: none; } .optionvalue { border: 1px solid; } .medicalTemplateContent{ border-color: grey; border-style: solid; border-width: 1px; padding: 10px; }

$(document).ready(function() { var selected = $(this).find(':selected'); $('.medicalTemplate').hide(); $('.'+selected.val()).show(); $('.selectTemplate').change(function(){ var selected = $(this).find(':selected'); $('.medicalTemplate').hide(); $('.'+selected.val()).show(); $('.optionvalue').html(selected.html()); }); });