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

Question

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

我正在使用 php、html 和 Sqlite 数据库。 hotelrows 和 roomrows 包含 hotel 表和 rooms 表的所有行。谁能告诉我如何让它发挥作用？例如，当选择 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();
    }); 

Answer 1

使用 roomnum 作为值，将您的 hid 添加为类，然后在选择时将其用作过滤器：

php:

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

page

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