使用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>";

頁

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