使用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