javascript - 通过 SelectBox 的下一个上一个按钮

Question

您好，我想要执行以下操作:

我有一个选择框，当我在更改产品的过程中单击页码时效果很好，我现在要做的是单击选择框图标自动前进到下一个值(页面)。

这是我的选择框，工作正常:

     <td colspan="3">page
        <select id="numPage">
            @if (ViewBag.pages == 0)
            {
                <option value="0" selected>0</option>
            }
            else
            {
                for (int i = 1; i <= ViewBag.pages; i++)
                {
                    if (ViewBag.Nowpage == i)
                    {
                <option id="Now" value="@(i)" selected>@(i)</option>   
                    }
                    else
                    {
                <option id="Next" value="@(i)">@(i)</option>   
                    }
                }
            }
        </select>
    de @(ViewBag.pages)</td>

这些是我的前一页、下一页或最后一页的按钮:

<div>
  <div id="startPage"><i class="fa fa-step-backward"></i></div>
  <div id="previousPage"><i class="fa fa-backward"></i></div>
  <div id="nextPage"><i class="fa fa-forward"></i></div>
  <div id="lastPage"><i class="fa fa-step-forward"></i></div>
</div>

我现在在第 4 页，但我想在单击图标前进时移至第 4 页:

当单击最后一页图标前进到选择框中的最后一页时:

我正在使用 JQUERY 和 MVC 4 进行编程，有什么建议吗？

Answer 1

类似这样的东西:

$("#nextPage").on("click", function(){
    changeIndex(true);
});

$("#previousPage").on("click", function(){
    changeIndex(false);
});

function changeIndex(val)
{
    var i = $("#numPage").prop("selectedIndex");
    $("#numPage").prop("selectedIndex", i + (val ? 1:-1));
    $("#numPage").trigger("change");
}

$("#numPage").on("change", function(){
    console.log("I got triggered");
});

jsFiddle:http://jsfiddle.net/4c7LV/

通过将索引与它拥有的项目数进行比较，确保检查索引是否超出了您选择的范围。