First of all, I have radio buttons. If it is clicked on radio button with value of 1 or 2, it has to appear the first dropdown - to choose region. When you choose it, it must appear next dropdown - for schools. And when you choose school, to appear dropdown for teachers. These are dependent dropdowns and the work correctly, but I couln't make them to show or hide if the previous dropdown is selected. I've done this to work for the radio button - to appear the first dropdown, but I couldn't for the others. Could you help me, I'm new to JavaScript. :) here's my code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
function showHide(self, show){
if (show)
$('.toggle').show();
else
$('.toggle').hide();
$(":radio").prop('checked',false);
$(self).prop('checked',true);
}
</script>
<script>
$(document).ready(function() {
$('#region').change(function() {
var url = "<?= base_url() ?>index.php/home/get_schools";
var postdata = {region: $('#region').val()};
$.post(url, postdata, function(result) {
var $school_sel = $('#school');
$school_sel.empty();
$school_sel.append("<option>Please choose region</option>");
var schools_obj = JSON.parse(result);
$.each(schools_obj, function(key, val) {
var option = '<option value="' + val.school_id + '">' + val.school_name + '</option>';
$school_sel.append(option);
});
});
});
});
</script>
<script>
$(document).ready(function() {
$('#school').change(function() {
var url = "<?= base_url() ?>index.php/home/get_teachers";
var postdata = {school: $('#school').val()};
$.post(url, postdata, function(result) {
var $teacher_sel = $('#teacher');
$teacher_sel.empty();
$teacher_sel.append("<option>Please choose school</option>");
var teachers_obj = JSON.parse(result);
$.each(teachers_obj, function(key, val) {
var option = "<option >" + val.username + "</option>";
$teacher_sel.append(option);
});
});
});
});
</script>
</head>
<?php
echo validation_errors();
echo "<div class='container'>";
echo form_open();
echo "<tr><td> Choose role:* </td><td>";
echo form_radio('role_id[]', '1', FALSE, 'onClick="showHide(this, true)"');
echo " 1 ";
echo form_radio('role_id[]', '2', FALSE, 'onClick="showHide(this, true)"');
echo "2 ";
echo form_radio('role_id[]', '5', FALSE, 'onClick="showHide(this, false)"');
echo " 3 ";
echo "</td></tr>";
echo "<tr class='toggle' style='display:none;'><td> Region:* </td><td>";
?>
<select name='region' id='region'>
<?php foreach ($regions as $row) { ?>
<option value= "<?= $row->region ?>"><?= $row->region ?></option>
<?php } ?>
</select>
<?php
echo "</td></tr>";
echo "<tr class='school' style='display:none;'><td> School:* </td><td>";
echo '<select id="school" name="school">';
echo '<option>Please choose region</option>';
echo '</select>';
echo "</td></tr>";
echo "<tr class='teacher' style='display:none;'><td> Teacher:* </td><td>";
echo '<select id="teacher" name="teacher">';
echo '<option>Please choose school</option>';
echo '</select>';
echo "</td></tr>";
echo "<tr class='class' style='display:none;'><td> Class
<select name='class[]' id='class'>
<?php foreach ($classes as $row) { ?>
<option value= "<?= $row->id ?>"><?= $row->class_id ?></option>
<?php } ?>
</select>
</td></tr>
<?php
echo "</table><br/>";
echo form_submit($data);
?>
</form></div>
Example how it works.
HTML:
<select id="test">
<option value="1">One</option>
<option value="2">Two</option>
</select>
<select id="test1" style="display:hidden;"> ... </select>
<select id="test2" style="display:hidden;"> ... </select>
JQuery:
$('test').change(function() {
var value = $(this).val();
$('test' + value).show();
});
Thank you. It's working now:
function show(yes, no){
if (no)
$('.school').show();
else
$('.school').hide();
$("region").prop('checked',false);
$(yes).prop('checked',true);
}
function school_show(yes, no){
if (no)
$('.teacher').show();
else
$('.teacher').hide();
$("school").prop('checked',false);
$(yes).prop('checked',true);
}
And in PHP:
<?php
echo "<tr class='toggle' style='display:none;'><td> Region:* </td><td>";
?>
<select name='region' id='region' onClick="show(this, true)">