• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

The Programming Expert

Solving All of Your Programming Headaches

  • HTML
  • JavaScript
  • jQuery
  • PHP
  • Python
  • SAS
  • Ruby
  • About
You are here: Home / JavaScript / Using JavaScript to Set Select to the First Option

Using JavaScript to Set Select to the First Option

July 26, 2022 Leave a Comment

We can use JavaScript to set select to the first option by using the getElementById() and getElementsByTagName() methods and targeting the value property.


document.getElementById("select-element").value = document.getElementById("select-element").getElementsByTagName('option')[0].value;

Let’s see an example of this below.


Lets say we have the following HTML:

<div id="div1">
  <select id="select1">
    <option value="car">Car</option>
    <option value="bus" selected>Bus</option>
    <option value="train">Train</option>
  </select>
  <div id="click-me" onclick="changeSelect()">Change select to first option</div>
</div>

In this example, the selected option to start will be the middle option, Bus. We can put our code above to use to make it so that when the user clicks the button, the selected option will be changed to the first option, Car.

We will create a function that runs this code when the user clicks our button.

Here is the JavaScript code we will need:

function changeSelect(){
  document.getElementById("select1").value = document.getElementById("select1").getElementsByTagName('option')[0].value;
}; 

Try it out below:

Code Output:

Change select to first option

Full Code:

<div id="div1">
  <select id="select1">
    <option value="car">Car</option>
    <option value="bus" slected>Bus</option>
    <option value="train">Train</option>
  </select>
  <div id="click-me" onclick="changeSelect()">Change select to first option</div>
</div>

<script>

function changeSelect(){
  document.getElementById("select1").value = document.getElementById("select1").getElementsByTagName('option')[0].value;
}; 

</script>

Using JavaScript to Set Select to the Last Option

To set Select to the last option, we can use our code from above, just change 0 to the length of our select element.

document.getElementById("select1").length;

Let’s add this code to our code from above:


document.getElementById("select1").value = document.getElementById("select1").getElementsByTagName('option')[document.getElementById("select1").length-1].value;

Let’s see this in action below:

Code Output:

Change select to last option

Full Code:

<div id="div1">
  <select id="select2">
    <option value="car">Car</option>
    <option value="bus">Bus</option>
    <option value="train">Train</option>
  </select>
  <div id="click-me" onclick="changeSelect2()">Change select to last option</div>
</div>

<script>

function changeSelect2(){
  document.getElementById("select2").value = document.getElementById("select2").getElementsByTagName('option')[document.getElementById("select2").length-1].value;
}; 

</script>

Using JavaScript to Set Select to a Specific Option

To set the Select to a specific option, in this case the middle option, Bus, we can change the number from our code above.


document.getElementById("select3").value = document.getElementById("select3").getElementsByTagName('option')[1].value;

Let’s see this in action below:

Code Output:

Change select to middle option

Full Code:

<div id="div1">
  <select id="select3">
    <option value="car">Car</option>
    <option value="bus">Bus</option>
    <option value="train">Train</option>
  </select>
  <div id="click-me" onclick="changeSelect3()">Change select to middle option</div>
</div>

<script>

function changeSelect3(){
  document.getElementById("select3").value = document.getElementById("select3").getElementsByTagName('option')[1].value;
}; 

</script>

Hopefully this article has been useful to help you understand how to use JavaScript to set select to the first option.

Other Articles You'll Also Like:

  • 1.  Using Javascript to Remove the Id from a Div
  • 2.  Using JavaScript to Convert Float to Integer
  • 3.  Using JavaScript to Return String
  • 4.  How to Use JavaScript to Change Button Text
  • 5.  JavaScript if else Shorthand Statement
  • 6.  JavaScript Opacity – How to Change the Opacity of an Element Using JavaScript
  • 7.  innerHTML vs outerHTML
  • 8.  How in JavaScript to Get the Day of the Week
  • 9.  Remove the First Element From Array in JavaScript
  • 10.  JavaScript toFixed – How to Convert a Number to a String

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

About The Programming Expert

the programming expert main image

Welcome to The Programming Expert. We are a group of US-based programming professionals who have helped companies build, maintain, and improve everything from simple websites to large-scale projects.

We built The Programming Expert to help you solve your programming problems with useful coding methods and functions in various programming languages.

Search

Learn Coding from Experts on Udemy

Looking to boost your skills and learn how to become a programming expert?

Check out the links below to view Udemy courses for learning to program in the following languages:

Copyright © 2023 · The Programming Expert · About · Privacy Policy