我首先有一个带单选按钮的表单。选择单选按钮时,会显示不同单选按钮的不同下拉列表。他们是相关的下拉菜单。首先我隐藏它们。它正常工作,但是当您单击“提交”按钮并且有未填写的字段或选项时,这些下拉菜单会隐藏,您必须再次选择它们。 如果您单击“提交”按钮并且存在验证错误,则表示要显示收音机的这些下拉列表,您已选择并选择了您的选择。 这是我的代码:
$(document).ready(function(){
$(":radio").click(function(){
$('#region').val('Choose region');
$('#school').val('Choose region');
$('#teacher').val('Choose school');
$('#class').val('Choose class');
$('#class_divisions').val('Choose division');
});
});
function showHide(self, show){
$(".all_teachers_show, .toggle, .school, .teacher_school, .teacher, .class, .teacher_class").hide();
if (show)
$('.toggle').show();
else
$('.toggle').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(document.getElementById("radio1").checked===true){
document.getElementById('class_label').innerHTML = 'Class:*';
if (no)
$('.teacher').show();
else
$('.teacher').hide();
$("school").prop('checked',false);
$(yes).prop('checked',true);
}
if(document.getElementById("radio2").checked===true){
document.getElementById('class_label').innerHTML = 'Class teacher:*';
if (no)
$('.class').show();
else
$('.class').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 teachers_show(yes, no){
$(".toggle, .all_teachers_show, .school, .teacher_school, .teacher, .class, .teacher_class").hide();
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>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>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);
});
});
});
});
<?php
echo validation_errors();
echo "<div class='container'>";
echo form_open();
echo "<table border = '0' >";
echo "<tr><td><label> Username:* </label></td><td>";
$data=array(
'name' => 'username',
'class' => form_error('username') ? 'error' : '',
'value' => set_value('username')
);
echo form_input($data);
echo "</td></tr>";
echo "<tr><td><label> Password:* </label></td><td>";
$data=array(
'name' => 'password',
'class' => form_error('password') ? 'error' : ''
);
echo form_password($data);
echo "<tr><td><label> Choose role:* </label> </td><td>";
<input type="radio" name="role_id" onClick='showHide(this, true)' id="radio1" <?php echo set_radio('role_id', '1'); ?> />
<?php echo " Student ";
$data=array(
'name' => 'role_id',
'value' => set_value('role_id', '2'),
'id' => 'radio2',
'onclick' => 'showHide(this, true)'
);
echo form_radio($data);
echo " Teacher ";
$data=array(
'name' => 'role_id',
'value' => set_value('role_id', '5'),
'id' => 'radio5',
'onclick' => 'teachers_show(this, true)'
);
echo form_radio($data);
echo " Coord. ";
echo "</td></tr>";
echo "<tr class='toggle' style='display:none;' ><td><label> Region:* </label></td><td>";
?>
<select name='region' id='region' onChange='show(this, true)'>
<option <?php echo set_select('region'); ?>>Choose region</option>
<?php foreach ($regions as $row) { ?>
<option name='region' value= "<?= $row->region ?>"><?= $row->region ?></option>
<?php } ?>
</select>
<?php
echo "</td></tr>";
echo "<tr class='school' style='display:none;' ><td><label> School:*
</label></td><td>";
?>
<select id="school" name="school[]" onChange='school_show(this, true)'>
<option <?php echo set_select('school[]'); ?>>Choose region</option>
</select>
<?php echo "</td></tr>";
echo "<tr class='teacher' style='display:none;' onChange='class_show(this, true)'><td><label> Teacher:*
</label> </td><td>";
echo '<select id="teacher" name="teacher[]">';
?>
<option <?php echo set_select('teacher'); ?>>Choose school</option>
</select>
</td></tr>
<?php
echo "<tr class='class' style='display:none;'><td> <label id='class_label'> Клас:* </label> </td><td>";
?>
<select name='class[]' id='class'>
<option <?php echo set_select('class[]'); ?>>Choose class</option>
<?php foreach ($classes as $row) { ?>
<option value= "<?= $row->id ?>"><?= $row->class_id ?></option>
<?php } ?>
</select>
<select name='class_divisions[]' id='class_divisions'>
<option <?php echo set_select('class_divisions[]'); ?>>Choose division</option>
<?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><label> Teachers:* </label></td><td>";
?>
<?php foreach ($all_teachers_show as $row) { ?>
<input type="checkbox" id='all_teachers_show' <?php echo set_checkbox('all_teachers_show[]'); ?> name="all_teachers_show[]"
value="<?= $row->user_id ?>"><?= $row->username ?>
<?php }
echo "</td></tr>";
echo "</div>";
echo "</table><br/>";
$data=array(
"name" => 'mysubmit',
'class' => 'btn btn-success ',
'id' => 'reg',
'value' => 'Register'
);
echo form_submit($data);
?>
</form>