示例:考虑到我有两个酒店房间可以通过两个选项BB或HB出售,当我更改选项1(在BB中选择一个房间)或更改选项2(在HB中选择一一个房间,再次选择选项1或选项2)时,仍然可用的房间数量必须仅为1
<script>
$(document).ready(function() {
$('#rates1').change(function() {
var val = parseInt($(this).val());
var optionlength = ($('#rates1 option').length);
var optionremove = optionlength - val - 1;
//alert(optionremove);
$('#rates2 option').remove();
});
});
</script>
<select id="rates1" class="selectclass">
<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>
</select><br />
<select id="rates2" class="selectclass">
<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>
</select>
根据我的理解,您希望在select1
的基础上显示select2
中的选项。
如果这是你的观点,那么试试这个
<select id="rates1" class="selectclass">
<option value="0">0</option>
<option value="50">1</option>
<option value="100">2</option>
</select>
<select id="rates2" class="selectclass">
<option data-rates1="1" value="0">0</option>
<option data-rates1="1" value="80">1</option>
<option data-rates1="2" value="160">2</option>
</select>
JS:
$('#rates1').on('change', function () {
if ((this.value === '0') || (this.value === '50')) {
$('#rates2 option[data-rates1=1]').show();
$('#rates2 option[data-rates1=2]').hide();
}
else {
$('#rates2 option[data-rates1=1]').hide();
$('#rates2 option[data-rates1=2]').show();
}
});
看看这个小提琴
您可能会混淆data-rates
,它只是HTML5
中的自定义数据属性。
希望你明白我的意思。
这个问题不清楚,所以我将把它解释为:当第一个<select>
标记中的选项被选中时,更改第二个<select>
标记中可供选择的选项。
注意:不能对多个项目使用相同的id属性;id的目的是唯一地定义单个项。在这种情况下,我将第一个<select>
标签称为id="selectid1"
,第二个<select>
标签称为id="selectid2"
。
当在第一个选择标签中选择选项"1"时,尝试此代码从第二个选择标签删除选项"1":(jsfiddle demo)
$("#selectid1").change(function () {
var selected_value = $("#selectid1 option:selected").val();
// adds the default options each time the .change() handler is fired
$("#selectid2").html("<option value="0">0</option><option value="80">1</option><option value="160">2</option>");
if (selected_value == 50) {
$("#selectid2 option[value='80']").remove();
}
});
主要的收获是.change()处理程序来检测选择何时发生了变化,以及我从这个问题中发现的按值选择选项的语法。