Sa zicem ca am o casuta de selectie de tip dropdown cu 3 optiuni: a, b si c. Imi doresc ca atunci cand selectez optiunea a, sa mi se afiseze o anumita casuta, pentru optiunea b, sa-mi ascunda elementele celelalte si sa-mi afiseze niste butoane de tip radio sau checkbox, s.a.m.d.
Exemplul cel mai potrivit este cel cu baza de date pentru judete, localitati si strazi. Vreau ca atunci cand selectez judetul Ilfov, sa am afisate doar localitatile din Ilfov, iar cand selectez localitatea din Ilfov, sa primesc lista cu strazile din localitatea respectiva. Acest lucru veti vedea mai jos pus in evidenta la modul minimalist.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
</head>
<body id="page-top">
<form method="get/post" enctype="multipart/form-data">
<h5>Incarca referinta catre un fisier</h5> <select style="height:30px" id="doc" name="doc" size="1" onchange="change();">
<option></option>
<option value="plan_uz">Plan Uz</option>
<option value="certif_urb">Certificat de urbanism</option>
<option value="aviz_cu">Avize CU</option>
</select>
<input type="text" name ="plan_uz" id="plan_uz" style="display: none;">
<input type="text" name ="certif" id="certif" style="display: none;">
<br><br>
<div id="aviz_cu" style="display:none;" class="checkboxes-and-radios">
<table border="0" style="padding-left:30px; display: inline-block; float: left; ">
<tbody>
<form>
<tr>
<td>
<div class="radio">
<label> <input type="radio" name="aviz_electric" value="aviz_electric"></label>Aviz Electric
</div>
</td>
</tr>
<tr>
<td>
<div class="radio">
<label><input type="radio" name="aviz_politie" value="aviz_politie"></label>Aviz Politie
</div>
</td>
</tr>
<tr>
<td>
<div class="radio">
<label><input type="radio" name="aviz_apa" value="aviz_apa"></label>Aviz Apa
</div>
</td>
</tr>
</form>
</tbody>
</table>
<table border="0" style="display: inline-block;">
<tbody>
<tr>
<td>
<div class="radio">
<label><input type="radio" name="aviz_aeroport" value="aviz_aeroport"></label>Aviz Aeroport
</div>
</td>
</tr>
<tr>
<td>
<div class="radio">
<label><input type="radio" name="aviz_gaze" value="aviz_gaze"></label>Aviz Gaze
</div>
</td>
</tr>
<tr>
<td>
<div class="radio">
<label><input type="radio" name="aviz_x" value="aviz_x"></label>Aviz X
</div>
</td>
</tr>
</tbody>
</table>
</div>
<br>
<input class="" type="submit" name="incarca_plan_uz" value="Incarca plan uz" id="plan_uz" style="display: none;">
<input class="" type="submit" name="incarca_cu" value="Incarca CU" id="incarca_cu" style="display: none; ">
</body>
</form>
</html>
Dupa cum se poate vedea avem 6 butoane de tip radio, 2 casute de tip text si 2 butoane.
Butoanele de tip radio au fost aranjate intr-o forma de tabel pentru a-si pastra o aliniere corespunzatoare.
Butoanele in principiu nu fac nimic in contextul actual, scopul tutorialului fiind de a arata cum putem afisa si ascunde anumite elemente cu respect fata de alte elemente din pagina. (Ele in programul de baza, dezvoltat de catre mine transmit datele catre baza de date cu php).
Stilul "display:none" ne ajuta sa ascundem elementele pana cand jquery le face vizibile.
index.js:
<script type="text/javascript">
$(document).ready(function () {
$('#doc').change(function () {
if ($('#doc').val() == 'plan_uz') {
$("#txtImage").show()
$("#certif").hide()
$("#plan_uz").show()
$("#incarca_cu").hide()
$("#aviz_cu").hide()
}
if ($('#doc').val() == 'certif_urb') {
$("#certif").show()
$("#txtImage").hide()
$("#plan_uz").hide()
$("#incarca_cu").show()
$("#aviz_cu").show()
}
if ($('#doc').val() == 'aviz_cu') {
$("#certif").hide()
$("#txtImage").hide()
$("#plan_uz").hide()
$("#incarca_cu").hide()
$("#aviz_cu").show()
}
});
});
</script>
Scriptul in jquery trebuie adaugat la fisierul index.html fie prin referinta, fie efectiv in cod la sfarsitul elementului <head>.
Inainte de script trebuie sa faceti referinta si bibliotecii pentru jquery. Exemplu de referinta: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> , dar puteti folosi si alte site-uri.
Pentru ajutor, intrebari sau colaborari ma puteti contacta in privat sau in comentarii :-)
0 comentarii:
Trimiteți un comentariu