jQuery select add update and remove

jQuery select add update and remove

本文关键字：and remove update add select jQuery      更新时间：2023-09-26

示例：考虑到我有两个酒店房间可以通过两个选项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（）处理程序来检测选择何时发生了变化，以及我从这个问题中发现的按值选择选项的语法。

相关文章：