通过 SelectBox 的下一个上一个按钮答案

【问题标题】：Next Previous Button via SelectBox通过 SelectBox 的下一个上一个按钮
【发布时间】：2013-11-29 17:01:16
【问题描述】：

您好，我想做以下事情：

我在更改产品的过程中点击一个页码时有一个选择框，我现在要做的是点击一个选择框图标自动前进到下一个值（页面）。

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

     <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 编程有什么建议吗？

【问题讨论】：

标签： c# javascript jquery asp.net-mvc-4 next

【解决方案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/

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

【讨论】：