Please refer this example
HTML with server controls
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function Next() {
var index;
var ddlNumbers = document.getElementById("<%=ddlNumbers.ClientID %>");
var options = ddlNumbers.getElementsByTagName("option")
for (var i = 0; i < options.length; i++) {
if (options[i].selected) {
index = i;
}
}
index = index + 1;
if (index >= ddlNumbers.length) {
alert('Last record reached')
}
else {
ddlNumbers.value = ddlNumbers[index].value;
}
return false;
}
function Previous() {
var index;
var ddlNumbers = document.getElementById("<%=ddlNumbers.ClientID %>");
var options = ddlNumbers.getElementsByTagName("option")
for (var i = 0; i < options.length; i++) {
if (options[i].selected) {
index = i;
}
}
index = index - 1;
if (index <= -1) {
alert('First record reached')
}
else {
ddlNumbers.value = ddlNumbers[index].value;
}
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="ddlNumbers" runat="server">
<asp:ListItem Text="Zero" Value="0" />
<asp:ListItem Text="One" Value="1" />
<asp:ListItem Text="Two" Value="2" />
<asp:ListItem Text="Three" Value="3" />
<asp:ListItem Text="Four" Value="4" />
<asp:ListItem Text="Five" Value="5" />
<asp:ListItem Text="Six" Value="6" />
<asp:ListItem Text="Seven" Value="7" />
</asp:DropDownList>
<br />
<asp:Button ID="btnPrev" Text="Previous" runat="server" OnClientClick="return Previous();" />
<asp:Button ID="btnNext" Text="Next" runat="server" OnClientClick="return Next();" />
</div>
</form>
</body>
</html>
Pure HTML With Demo
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function Next() {
var index;
var ddlNumbers = document.getElementById("ddlNumbers");
var options = ddlNumbers.getElementsByTagName("option")
for (var i = 0; i < options.length; i++) {
if (options[i].selected) {
index = i;
}
}
index = index + 1;
if (index >= ddlNumbers.length) {
alert('Last record reached')
}
else {
ddlNumbers.value = ddlNumbers[index].value;
}
}
function Previous() {
var index;
var ddlNumbers = document.getElementById("ddlNumbers");
var options = ddlNumbers.getElementsByTagName("option")
for (var i = 0; i < options.length; i++) {
if (options[i].selected) {
index = i;
}
}
index = index - 1;
if (index <= -1) {
alert('First record reached')
}
else {
ddlNumbers.value = ddlNumbers[index].value;
}
}
</script>
</head>
<body>
<select name="ddlNumbers" id="ddlNumbers">
<option value="0">Zero</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
</select>
<hr />
<input type="button" name="btnPrev" value="Previous" onclick="Previous();" id="btnPrev" />
<input type="button" name="btnNext" value="Next" onclick="Next();" id="btnNext" />
</body>
</html>
Demo
