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/

当更改from值时，to值将根据from_value事件进行更改。

现在，我要做的是。

如果from_value为5，则to_value应仅显示5,6,7,8（仅显示所选值中的四个值）

换句话说，相对于from_value仅显示四个值。如果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

使用HTML jQuery处理选择框值

2 个答案: