How to show a new column after using select2 in laravel? - laravel

Question

I have a form and using select2 for filter. I want to show new column by using this select2.
I don't know its possible or not but i want to do this . using jquery or something, can someone reference to me about this? its my form for my input
<form class="form-prevent-multiple-submits" data-toggle="validator" action="{{route('update_sarpras_aduan'),'test'}} " method="post">
#csrf
{{method_field('patch')}}
<div class="form-group">
<label class="control-label" for="title">Nama Unit:</label>
<input type="text" name="nama_unit" id="nama_unit" class="form-control" data-error="Please enter title." required disabled/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label class="control-label" for="title">Tanggal Aduan:</label>
<textarea name="created_at" class="form-control" id="tgl_aduan" data-error="Please enter description." readonly ></textarea>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label class="control-label" for="title">Nama Pengadu:</label>
<input type="text" name="nama_pengadu" class="form-control" id="nama_pengadu" data-error="Please enter title." readonly />
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label> Isi Aduan </label>
<textarea name="aduan" id="aduan" class="form-control" rows="3" placeholder="Isi Aduan atau Keluhan ..." readonly ></textarea>
</div>
<div class="form-group">
<label class="control-label" for="title">Nama Teknisi:</label>
<input type="text" name="nama_teknisi" class="form-control" id="nama_teknisi" data-error="Please enter title." readonly />
<div class="help-block with-errors"></div>
</div>
----------------here this select2---------------------------
<div class="form-group">
<label>Pilih Inventaris</label>
<select class="form-control select2bs4" name="alat_id" id="alat_id" style="width: 100%;" aria-hidden="true">
#foreach($inven as $id => $item )
<option value="{{ $id }}">{{ $item }} </option>
#endforeach
</select>
</div>
--------------------------------------------------
<div class="form-group">
<label>Status Saat Ini (Jangan Lupa Diganti)</label>
<select name="status" id="status" class="form-control">
<option value="Tindakan Lanjutan">Tindakan Lanjutan</option>
<option value="Selesai">Selesai</option>
</select>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label> Tindakan Pelaksana </label>
<textarea name="tindakan" id="tindakan" class="form-control" rows="3" placeholder="Isi Tindakan Yang dilakukan" required ></textarea>
</div>
<div class="form-group">
<label>Kondisi Alat </label>
<select name="status_alat" id="status_alat" class="form-control">
<option value="Baik">Baik</option>
<option value="Rusak Ringan">Rusak Ringan</option>
<option value="Rusak Berat">Rusak Berat</option>
</select>
<div class="help-block with-errors"></div>
</div>
<input type="hidden" name="id" id="id" value="">
<input type="hidden" name="user_id" id="user_id" value="">
<input type="hidden" name="ipsrs_id" id="ipsrs_id" value="">
<input type="hidden" name="teknisi_id" id="teknisi_id" value="">
<input type="hidden" name="ended_at" id="ended_at" value="">
<div class="form-group">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<button type="submit" id="button" class="btn btn-success crud-submit-edit button-prevent-multiple-submits">
<i class="spinner fa fa-spinner fa-spin" ></i>
Submit</button>
</div>
</form>
after using this select2 , will showing a new form . can someone references to me about this ?

Answer 1

//select input
<div class="form-group">
<label>Pilih Inventaris</label>
<select class="form-control select2bs4" name="alat_id" id="alat_id" style="width: 100%;" aria-hidden="true" onchange="Show()">
#foreach($inven as $id => $item )
<option value="{{ $id }}">{{ $item }} </option>
#endforeach
</select>
</div>
//new form
<div id="divid" style="display:none">
<form method="" action="">
#csrf
</form
<div>
//javascript code
<script>
function Show()
{
var fieldValue = $('#alat_id').val();
if(fieldValue == "")
{
document.getElementById("divid").style.display = 'none';
}
else{
document.getElementById("divid").style.display = 'inline'
}
}
</script>