Create Previous and Next Buttons for Select Option Navigation in JavaScript

In this tutorial, we will learn how to create a simple and effective way to navigate through the options in an HTML select dropdown list using "Previous" and "Next" buttons. This can be useful in various scenarios where users need to cycle through options programmatically.

Demo

Demo select

Selected option value : HTML

HTML Structure

First, lets set up the basic HTML structure. We will use a select element to list the options, and two buttons: "Previous" and "Next" to navigate through the

HTML

<select id="options-select">
    <option value="HTML">HTML</option>
    <option value="CSS">CSS</option>
    <option value="JavaScript">JavaScript</option>
    <option value="PHP">PHP</option>
</select>

<button id="previous">Previous</button>
<button id="next">Next</button>

<div id="result"></div>

CSS Style

Style For The Select Element And Buttons

CSS

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #ffffff;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 10px 35px 10px 10px;
    font-size: 16px;
    line-height: 1.5;
    color: #495057;
    width: 100%;
    margin-bottom: 15px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23343a40' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
}
button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    margin: 5px;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
}
button:hover {
    background-color: #0056b3;
}
button:disabled {
    background-color: #dfdfdf;
    cursor: not-allowed;
    color: #ababab;
}
#result {
    margin: 15px 0px;
    font-size: 20px;
}

JavaScript Code

Now we need the JavaScript functions to handle the navigation. The previousOption() function will decrease the selected index, and the nextOption() function will increase the index.

JavaScript

const select = document.getElementById("options-select");
const prevButton = document.getElementById("previous");
const nextButton = document.getElementById("next");
const result = document.getElementById("result");

// Navigate options within the select element
const navigateOptions = (direction, callback) => {
    const currentIndex = select.selectedIndex;
    const options = select.options;
    const optionsCount = options.length;
    if (optionsCount === 0) return;
    let newIndex = currentIndex;
    // Adjust the index based on the navigation direction
    if (direction === 'next' && currentIndex < optionsCount - 1) {
        newIndex = currentIndex + 1;
    } else if (direction === 'prev' && currentIndex > 0) {
        newIndex = currentIndex - 1;
    }
    select.selectedIndex = newIndex;
    updateButtonState();
    // Trigger the callback with the new selected option's value and text
    if (typeof callback === "function") {
        const selectedOption = options[newIndex];
        callback(selectedOption.value, selectedOption.text);
    }
};

// Update the state of the Previous and Next buttons
const updateButtonState = () => {
    prevButton.disabled = select.selectedIndex === 0;
    nextButton.disabled = select.selectedIndex === select.options.length - 1;
};
// Initialize button states on page load
updateButtonState();

// Attach event listeners to the buttons
prevButton.addEventListener("click", () => navigateOptions("prev", logSelectedOption));
nextButton.addEventListener("click", () => navigateOptions("next", logSelectedOption));

// Callback function example
const logSelectedOption = (value, text) => {
    result.innerText = `Selected option - Value: ${value}`;
    console.log(`Selected option - Value: ${value}, Text: ${text}`);
};

// Handle user manual option selection via select element change event
select.addEventListener('change', (event) => {
    const selectedOption = select.options[select.selectedIndex];
    logSelectedOption(selectedOption.value, selectedOption.text);
    updateButtonState();
});

This code allows users to cycle through the dropdown options using the buttons without manually selecting them.

Click the button below try it yourself live edit and preview

Run code Edit Code

Report Problem