如果選擇了其他下拉菜單，則顯示並隱藏下拉菜單

首先，我有單選按鈕。如果單擊值爲1或2的單選按鈕，它必須出現第一個下拉菜單 - 選擇區域。當你選擇它時，它必須出現在下一個下拉列表中 - 供學校使用。當你選擇學校時，爲老師顯示下拉菜單。這些依賴的下拉菜單和正確的工作，但是如果選擇了上一個下拉列表，我不會讓它們顯示或隱藏。我已經完成了這項工作，爲單選按鈕工作 - 出現第一個下拉框，但我無法爲其他人。你能幫我嗎，我是JavaScript的新手。 :)這裏是我的代碼：如果選擇了其他下拉菜單，則顯示並隱藏下拉菜單

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

來源

2015-04-07 mistery_girl

您正在使用jQuery和PHP。請編輯你的問題，標籤正確 –

例如何工作的。

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

來源

2015-04-07 13:20:39

謝謝。它的工作現在：

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)">

來源

2015-04-07 13:54:00

如果選擇了其他下拉菜單，則顯示並隱藏下拉菜單

回答

相關問題