使用HTML處理選擇框值jQuery

Question

我有這樣的代碼。

HTML：

<select id="from_value"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
    <option value="6">6</option> 
    <option value="7">7</option> 
    <option value="8">8</option> 
    <option value="9">9</option> 
    <option value="10">10</option> 
    </select> 
    <select id="to_value"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
    <option value="6">6</option> 
    <option value="7">7</option> 
    <option value="8">8</option> 
    <option value="9">9</option> 
    <option value="10">10</option> 
    </select> 

JQuery的：

$("#from_value").change(function() { 
    var val = +this.value; 
    $("#to_value option").hide(); 
    $("#to_value option:gt(" + val + "),#to_value option:eq(" + val + ")").show(); 
    $("#to_value").val(val); 
    });  

的代碼中的jsfiddle方便編輯共享。 http://jsfiddle.net/fuub1wrd/1/

當從值改變時，to值將根據from_value事件改變。

現在，我想要做的是。

如果from_value是5，則to_value應該相對於所述from_value顯示5,6,7,8只（只有四個從所選擇的值的值）

換言之，僅顯示四個值。 如果from_value爲6，然後在to_values我應該能看到的只有6,7,8,9

我怎樣才能做到這一點？我知道這有點簡單，但是，我仍然坐在代碼中。

感謝， Kimz

Answer 1

嘗試......

$("#from_value").change(function() { 
    var val = +this.value; 
    $("#to_value option") 
    .hide() 
    .filter(function() { 
     return ($(this).val() >= val && $(this).val() < val + 4); 
    }) 
    .show(); 
    $("#to_value").val(val); 
}); 

http://jsfiddle.net/fuub1wrd/4/

它隱藏了所有的選項，然後使用filter()功能，以確定要顯示的選項。

Answer 2

試試這個：

HTML：

<select id="from_value"> 
    <option value="0">select</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
    <option value="6">6</option> 
    <option value="7">7</option> 
    <option value="8">8</option> 
    <option value="9">9</option> 
    <option value="10">10</option> 
</select> 
<select id="to_value"> 
    <option value="0">select</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
    <option value="6">6</option> 
    <option value="7">7</option> 
    <option value="8">8</option> 
    <option value="9">9</option> 
    <option value="10">10</option> 
</select> 

的Jquery：

$("#from_value").change(function() { 
    var val = +this.value; 
    $("#to_value option").removeAttr('disabled'); 
    $("#to_value option:lt(" + val + ")").attr('disabled','disabled'); 
}); 

DEMO