Question

xample：考虑到我有2个酒店房间，可以出售2个选项BB或HB，当我更改选择1的选项（在BB中取1个房间）或我更改选择2的选项（占用1个房间）在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>

Answer 1

根据我的理解，您希望根据select2在select1中显示选项。

如果那是你的观点，试试这个

<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();

    }
});

查看此fiddle

您可能会对data-rates感到困惑，HTML5中只有custom data attributes。

希望你明白我的意思。

Answer 2

问题尚不清楚，因此我将其解释为：当选择第一个<select>标记中的选项时，更改可在第二个<select>标记中选择的选项。< / p>

注意：您不能对多个项目使用相同的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（）处理程序，以及用于从this question找到的按值选择选项的语法。

jQuery选择添加更新并删除

2 个答案: