我有这段代码可以循环显示可用房间的数量。
<div class="pull-left col-xs-12 col-sm-4 col-md-4">
<?php
$option = [];
$value_3 = isset($rooms['total_available_room']) ?
$rooms['total_available_room'] : 0;
for ($i=0; $i <= $value_3; $i++) {
$option[$i] = $i;
}
?>
{{ Form::label('rooms', 'No. of rooms: ',['style' => 'color:black']) }}
{{ Form::select('n_rooms', $option, null, ['required', 'tabindex' => '10', 'id' => 'selectBox']) }}
</div>
<div class="button-style-1" style="padding-bottom:80px" style="padding-bottom:40px"><a href="javascript:removeItem()" ><i class="fa fa-calendar"></i><span class="mobile-visibility">BOOK</span></a></div>
现在，当用户单击“预订”按钮后，如何删除减少可用房间的数量。例如，如果选择的值为4，可用房间为7，则单击按钮后，选择的值应为0-3。
function removeItem()
{
$("#selectBox $option[0] - $option[]").remove();
}
如何正确执行此操作？
添加了呈现的HTML
<tr class="table-products-list pos-center">
<td class="products-image-table" style="padding-top:0px"><img alt="Products Image 1" src="http://localhost/site/public/storage/cover_images/Standard-room_1543751302.jpg" class="img-responsive"></td>
<td class="title-table">
<div class="room-details-list clearfix">
<div class="pull-left">
<h5>Standard Room</h5>
</div>
<div class="pull-left room-rating">
<ul>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star inactive"></i></li>
</ul>
</div>
</div>
<div class="list-room-icons clearfix">
<ul>
<li title="Free Wifi"><i class="fa fa-wifi"></i></li>
<li title="Parking Space"><i class="fa fa-car"></i></li>
<li title="Airconditioned Room"><i class="fa fa-snowflake-o"></i></li>
<li title="Televisions"><i class="fa fa-television"></i></li>
<li title="Shower"><i class="fa fa-shower"></i></li>
<li title="Breakfast"><i class="fa fa-spoon"></i></li>
</ul>
</div>
<p style="margin:0px"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a class="active-color" href="standard">[...]</a> </p>
<div class="row">
<div class="pull-left col-xs-12 col-sm-4 col-md-4">
<label for="adult" style="color:black">No. of Adult: </label>
<select required tabindex="9" name="n_adult"><option value="1">1</option><option value="2">2</option></select>
</div>
<div class="pull-left col-xs-12 col-sm-4 col-md-4">
<label for="children" style="color:black">No. of Children: </label>
<select required tabindex="10" name="n_children"><option value="0">0</option><option value="1">1</option></select>
</div>
<div class="pull-left col-xs-12 col-sm-4 col-md-4">
<label for="rooms" style="color:black">No. of rooms: </label>
<select required tabindex="10" id="selectBoxStandard" name="n_rooms"><option value="0">0</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><option value="6">6</option><option value="7">7</option></select>
</div>
</div>
</td>
<td>
<h3>P2000</h3>
</td>
<td>
<div class="pull-right">
<h4 style="color:red">7 Rooms Available</h4>
</div>
<div class="button-style-1" style="padding-bottom:80px" style="padding-bottom:40px"><a href="javascript:standardRoom()" ><i class="fa fa-calendar"></i><span class="mobile-visibility">BOOK
</span></a></div>
</td>
</tr>
答案 0 :(得分：0)
将事件处理程序连接到所选内容的change事件。
当该事件触发时，计算可用房间总数与用户所选选项之间的差。
隐藏所有值大于此差异的选项，并显示所有其他选项。
假设最后一个选项始终是该代码段可以使用的最大房间数。
$('#selectBoxStandard').change(function() {
var sel = $(this);
var opts = this.options;
var max = parseInt(opts[opts.length - 1].value);
var val = parseInt($(sel).val());
var remaining = max - val;
$(opts).each(function(i, e) {
if (parseInt($(e).val()) <= remaining) {
$(e).show();
} else {
$(e).hide();
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pull-left col-xs-12 col-sm-4 col-md-4">
<label for="rooms" style="color:black">No. of rooms: </label>
<select required tabindex="10" id="selectBoxStandard" name="n_rooms">
<option value="0">0</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>
<option value="6">6</option>
<option value="7">7</option>
</select>
</div>