我有一个注册表。我正在使用jQuery。但现在我的代码很长，我想让它变小。但是我对jQuery并不擅长。在我的注册表格中，您应该从3个单选按钮中选择 - 适用于学生，教师或者指导。如果你是一名学生，你应该看到第一次下载地区，下一次 - 下载与学校，下一次 - 与教师，最后 - 与课程。如果您是老师，您应该看到这些下拉菜单，但没有＆＃34;老师＆＃34;落下。如果你是一个协调员，你应该只看到所有教师的名单。 现在，如果你是学生，或者如果你是教师或协调员，我会调用不同的方法。如何将它们组合成几种方法，对于不同的单选按钮没有区别？我必须首先隐藏所有内容然后显示不同的功能。因为现在如果我点击第一个单选按钮然后再单击第三个单选按钮，它会显示仅适用于第一个单选按钮的下拉菜单，但不会显示最后一个单选按钮的下拉菜单。 我的代码是：
<!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);
}
function teacher_role(self, show){
if (show)
$('.region').show();
else
$('.region').hide();
$(":radio").prop('checked',false);
$(self).prop('checked',true);
}
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);
}
function class_show(yes, no){
if (no)
$('.class').show();
else
$('.class').hide();
$("teacher").prop('checked',false);
$(yes).prop('checked',true);
}
function teacher_school_show(self, show){
if (show)
$('.teacher_school').show();
else
$('.teacher_school').hide();
$("region").prop('checked',false);
$(self).prop('checked',true);
}
function teacher_class_show(yes, no){
if (no)
$('.teacher_class').show();
else
$('.teacher_class').hide();
$("teacher").prop('checked',false);
$(yes).prop('checked',true);
}
function teachers_show(yes, no){
if (no)
$('.all_teachers_show').show();
else
$('.all_teachers_show').hide();
$(":radio").prop('checked',false);
$(yes).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 value="' + val.user_id + '">' + val.username + '</option>';
$teacher_sel.append(option);
});
});
});
});
</script>
</head>
<body>
<?php
echo validation_errors();
echo "<div class='container'>";
echo form_open('home/register');
//some inputs
echo "<tr><td> Choose role:* </td><td>";
echo form_radio('role_id[]', '1', FALSE, 'onClick="showHide(this, true)"');
echo " Student ";
echo form_radio('role_id[]', '2', FALSE, 'onClick="teacher_role(this, true)"');
echo " Teacher ";
echo form_radio('role_id[]', '5', FALSE, 'onClick="teachers_show(this, true)"');
echo " Coordinator ";
echo "</td></tr>";
echo "<tr class='toggle' style='display:none;'><td> Region:* </td><td>";
?>
<select name='region' id='region' onClick="show(this, true)">
<?php foreach ($regions as $row) { ?>
<option value= "<?= $row->region ?>"><?= $row->region ?></option>
<?php } ?>
</select>
<?php
echo "</td></tr>";
echo "<tr class='region' style='display:none;'><td> Region:* </td><td>";
?>
<select name='region' id='region' onClick="teacher_school_show(this, true)">
<?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;' onClick='school_show(this, true)'><td> School:* </td><td>";
echo '<select id="school" name="school[]">';
echo '<option name="school[]">Please choose region</option>';
echo '</select>';
echo "</td></tr>";
echo "<tr class='teacher_school' style='display:none;' onClick='teacher_class_show(this, true)'><td> School:* </td><td>";
echo '<select id="school" name="school[]">';
echo '<option name="school[]">Please choose region</option>';
echo '</select>';
echo "</td></tr>";
echo "<tr class='teacher' style='display:none;' onClick='class_show(this, true)'><td> Учител:* </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:* </td><td>";
?>
<select name='class[]' id='class'>
<?php foreach ($classes as $row) { ?>
<option value= "<?= $row->id ?>"><?= $row->class_id ?></option>
<?php } ?>
</select>
<select name='class_divisions[]' id='class_divisions'>
<?php foreach ($class_divisions as $row) { ?>
<option value= "<?= $row->id ?>"><?= $row->division ?></option>
<?php } ?>
</select>
</td></tr>
<tr class='teacher_class' style='display:none;'><td> Класен ръководител:* </td><td>
<select name='class[]' id='class'>
<?php foreach ($classes as $row) { ?>
<option value= "<?= $row->id ?>"><?= $row->class_id ?></option>
<?php } ?>
</select>
<select name='class_divisions[]' id='class_divisions'>
<?php foreach ($class_divisions as $row) { ?>
<option value= "<?= $row->id ?>"><?= $row->division ?></option>
<?php } ?>
</select>
</td></tr>
<?php
echo "<tr class='all_teachers_show' style='display:none;'><td> Teachers:* </td><td>";
?>
<?php foreach ($all_teachers_show as $row) { ?>
<input type="checkbox" id='all_teachers_show' name="all_teachers_show[]"
value="<?= $row->user_id ?>"><?= $row->username ?>
<?php } ?>
<?php
echo "</td></tr>";
echo "</table><br/>";
$data=array(
"name" => 'mysubmit',
'class' => 'btn btn-success ',
'id' => 'reg',
'value' => 'Register'
);
echo form_submit($data);
?>
</form>
</div>
</body>
</html>