显示/隐藏Div元素"php for"循环 - Show/Hide Div Elements with "php for" loop

Show/Hide Div Elements with "php for" loop

我目前有4div . 1总是显示取决于所选择的下拉菜单选项，其余3则隐藏。

我想要的是如果选择"2"显示2个div，如果选择"3"显示3个div，等等。我有一个php for循环，我想把它拆开，但我不知道该怎么做。

下面是一个例子:

<?php for($i=0; $i<4; $i++): ?>
<div class="<?php echo ($i>0?' hide':'') ?>">
This is Div <?php echo ($i+1) ?>.
</div>
<?php endfor; ?>

我知道我将不得不创建4个单独的div，但我不知道如何显示/隐藏这些取决于$i。

<?php 
// $_GET["dropdown"] can be 1,2,3 or 4
$dropdown =  $_GET["dropdown"];

for($i=1; $i<=4; $i++): ?>
<div class="<?php echo ( $i > $dropdown ) ? 'hide':''; ?>">
This is Div <?php echo $i; ?>.
</div>
<?php endfor; ?>

CSS

.hide{
 display:none;
}

如果从下拉菜单中选择了一个触发器，那么您需要JavaScript来显示和隐藏

 //code on html or ctp
 <div class="1" style="display:none;">
 <div class="2" style="display:none;">
 <div class="3" style="display:none;">
 <div class="4" style="display:none;">

在JavaScript

 <script type="text/javascript>
      //get the value from the dropdown-menu option 
      //some codes here
      var id = //value from the dropdown-menu option 
      if(id==1){
         $("1").show();
         $("2").hide();
         $("3").hide();
         $("4").hide();
      }
      else if(id == 2){
         $("1").hide();
         $("2").show();
         $("3").hide();
         $("4").hide();
      }
      else if(id == 3){
         $("1").hide();
         $("2").hide();
         $("3").show();
         $("4").hide();
      }
      else if(id == 4){
         $("1").hide();
         $("2").hide();
         $("3").hide();
         $("4").show();
      }
 </script>