Change the selected value of a select element

How to change the selected value of a ‘select’ element using JavaScript?

To change the selected value of a element using JavaScript, you can modify the value property of the element. Here’s an example of how you can do it:

HTML

<select id="pageSelect"></select>

JavaScript

<script>
$(document).ready(function () {
  var selectElement = document.getElementById("pageSelect");

// Function to update the page options
function updatePageOptions(totalPages, currentPage) {
  selectElement.innerHTML = ""; // Clear existing options
  
  for (var i = 1; i <= totalPages; i++) {
    var option = document.createElement("option");
    option.value = i;
    option.text = "Page " + i + " of " + totalPages;
    selectElement.appendChild(option);
  }
  
  selectElement.value = currentPage; // Set the selected page
}

// Example usage
var totalPages = 4;
var currentPage = 2;
updatePageOptions(totalPages, currentPage);

});
</script>

How to change the page value of a select element using JavaScript

In this example, we first retrieve the ‘<select>’ element using its ‘id’ attribute and store it in the ‘selectElement’ variable. We then define the ‘updatePageOptions’ function, which takes the total number of pages (‘totalPages’) and the current page (‘currentPage’) as arguments.

Inside the ‘updatePageOptions’ function, we first clear any existing options in the select element using ‘selectElement.innerHTML = “”‘. Then, we loop through the desired number of pages and create an ‘<option>’ element for each page. We set the ‘value’ property of the option to the page number and set the ‘text’ property to the desired display format (“Page X of Y”). Finally, we append the option to the select element.

After creating all the options, we set the ‘value’ of the select element to the current page using ‘selectElement.value = currentPage’, so that the corresponding option is selected.

You can adjust the values of ‘totalPages’ and ‘currentPage’ to match your specific scenario, and then call the ‘updatePageOptions’ function to update the select element accordingly.

You can customize this code further as per your requirement.

---

Learn HTML/CSS from W3 School Website

• JavaScript