通过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/

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