使用jQuery隐藏选择列表中的选项

时间:2011-12-19 22:52:23

标签: php jquery html database

当您点击提交按钮时,如何隐藏不在Hotel1的房间号码并将所选房间号码发送到下一页。因为现在我将被迫只发送所选酒店的ID,因为我需要有selHotel选项的价值和selroom相同。

我正在使用php,html和Sqlite数据库。 hotelrows和roomrows包含所有酒店桌子和房间表。任何人都可以告诉我如何让这个工作?即在选择Hotel1时,我可以选择在selroom中选择101或102房间。 (对不起,如果我的英语不好,希望有人理解我的要求。)

Hotels:
id.....Hotel
1......Hotel1
2......Hotel2

Rooms:
hid....Room#
1.......101
1.......102
2.......301

我的php / html:

<select id="selHotel" name="selH">
<option value="default" selected> Select hotel</option>
<?php
  foreach($hotelrows as $row)
  {
    echo "<option value='". $row['id'] . "'>". $row['hotelname'] . "</option>";
  }
?>
 </select>

 <select id="selroom" name="selr">
<option value="default" selected>Select room </option>
<?php
  foreach($roomrows as $row)
  {
    echo "<option value='". $row['hid'] . "'>". $row['roomnum'] . "</option>";
      }
?>
 </select>

jQuery隐藏Hotel2 Rooms然后我选择Hotel1:

$("#selHotel").change(function(){
        var hotelVal = $(this).find("option:selected").val();
        $('#selroom option').hide();
        $('#selroom option[value='+hotelVal+']').show();
    }); 

1 个答案:

答案 0 :(得分:0)

使用roomnum作为值,将您的hid添加为类,然后在选中时将其用作过滤器:

PHP:

echo "<option class='cls_". $row['hid'] . "' vlaue='".$row['roomnum']."'>". $row['roomnum'] . "</option>";

$("#selHotel").change(function(){
    var hotelVal = $(this).find("option:selected").val();
    $('#selroom option').hide();
    $('#selroom .cls_'+hotelVal).show();
    $('#selroom .cls_'+hotelVal).first().attr('selected',true);
});