Question

首先，我有单选按钮。如果单击值为1或2的单选按钮，则必须显示第一个下拉列表 - 选择区域。当你选择它时，它必须出现在下一个下拉列表 - 对于学校。当你选择学校时，会出现教师的下拉菜单。这些是相关的下拉和正常工作，但如果选择了上一个下拉列表，我无法显示或隐藏它们。我已经完成了这个工作的单选按钮 - 出现第一个下拉列表，但我不能为其他人。你能帮助我吗，我是JavaScript的新手。 :)这是我的代码：

＆＃13;

    <!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>

＆＃13;

Answer 1

谢谢。它现在正在运作：

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);
}

在PHP中：

<?php
echo "<tr class='toggle' style='display:none;'><td>  Region:*  </td><td>";
?>
<select name='region' id='region' onClick="show(this, true)">

Answer 2

示例如何运作。

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();
});

如果选择了另一个下拉列表，则显示并隐藏下拉列表

2 个答案: