Question

我必须为预订表单编写一个简单的脚本。这个想法是显示所选每个房间的成人和儿童数量。但是如果输入了少数儿童，我需要为每个孩子显示年龄字段。

像这样：

 Number of Rooms - 2

    Room-1
    Adults: 2   Children: 2 
                Children Age[1] : 10 Children Age[2] : 15
--------------------------------------
    Room-2
    Adults: 2   Children: 1 
                Children Age[1] : 6 
--------------------------------------

这就是想法（就像Expedia Seach Box）。

这是我的代码，几乎正常工作。当我选择儿童年龄时，成人和儿童的输入会消失。

在我的代码中：

enter code here

<lablel>ROOMS</lablel>
<select id="rooms" name="rooms" size="1"/>
<option val="">-?-</option>
<option val="1">1</option>
<option val="2">2</option>
<option val="3">3</option>
<option val="4">4</option>
<option val="5">5</option>
</select>
<div id="showRoom1" style="display:<?php echo $selhab1 ;?>">Room [1]
<label>ADULTS</lablel><lablel>CHILDREN</lablel>
<select required id="seldos" name="adlr1" size="1">
<option value="">--?--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select id="child" name="chl" size="1" />
<option val="0">--</option>
<option val="1">1</option>
<option val="2">2</option>
<option val="3">3</option>
<option val="4">4</option>
<option val="5">5</option>
</select>
<div id="show1" style="display:<?php echo $seled1 ;?>">Age Child [1]
<?php       
echo'<select class="seldos" id=select name="age1" id="age1" >';
if($age1 == ''){
 echo'<option value="--">-?-</option>';
 }else{      
 print "<option value='$age1'>$edad1</option>";
 }      
 for ($i = 1; $i <= $maxage; $i++) {
    echo "<option value=$i>";
    echo "$i</option>";
 }
 print"</select></div>";
  ?> 
<div id="show2" style="display:<?php echo $seled2 ;?>">Age Child [2]
<?php
   echo'<select class="seldos" name="edad2" id="age2">';
   if($age2 == ''){
     echo'<option value="--">-?-</option>';
   }else{        
     print "<option value='$age2'>$age2 </option>";
} 
for ($i = 1; $i <= $maxage; $i++) {
    echo "<option value=$i>";
    echo "$i</option>";
    }
print"</select></div>";  
?>
   .
   .
   .
   ****  UNTIL CHILD AGE 5
</div>

<script>
$("#rooms").bind("change", function () {
var value = parseInt(this.value, 10);

$("div[id^='showRoom']").hide();

for(var i = 1; i <= value; i++) {
    $("#showRoom" + i).fadeIn(300);
}
});
$("#child").bind("change", function () {
var value = parseInt(this.value, 10);

$("div[id^='show']").hide();

for(var i = 1; i <= value; i++) {
    $("#show" + i).fadeIn(300);
}
});

</script>

Answer 1

我相信你的问题就在这一行：

$("div[id^='show']").hide();

这隐藏了包含成人和儿童输入的showRoom1 DIV。

使用jquery隐藏显示多个div

1 个答案: