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中找到該選項。