jQuery选择添加更新并删除

Question

xample：考虑到我有两个酒店房间，可以使用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

按我的理解，你想展示基于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(); 

    } 
}); 

看看这个fiddle

你可能会感到困惑的data-rates，它只不过是在HTML5custom data attributes。

希望你明白我的观点。

Answer 2

这个问题还不清楚，所以我打算将其解释为：当选择第一个<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 （）处理程序来检测选择何时发生更改以及通过值选择选项的语法，我从this question中找到该选项。