- Javascript Basics Tutorial
- Javascript - Home
- Javascript - Overview
- Javascript - Syntax
- Javascript - Enabling
- Javascript - Placement
- Javascript - Variables
- Javascript - Operators
- Javascript - If...Else
- Javascript - Switch Case
- Javascript - While Loop
- Javascript - For Loop
- Javascript - For...in
- Javascript - Loop Control
- Javascript - Functions
- Javascript - Events
- Javascript - Cookies
- Javascript - Page Redirect
- Javascript - Dialog Boxes
- Javascript - Void Keyword
- Javascript - Page Printing
- JavaScript Objects
- Javascript - Objects
- Javascript - Number
- Javascript - Boolean
- Javascript - Strings
- Javascript - Arrays
- Javascript - Date
- Javascript - Math
- Javascript - RegExp
- Javascript - HTML DOM
- JavaScript Advanced
- Javascript - Error Handling
- Javascript - Validations
- Javascript - Animation
- Javascript - Multimedia
- Javascript - Debugging
- Javascript - Image Map
- Javascript - Browsers
- JavaScript Useful Resources
- Javascript - Questions And Answers
- Javascript - Quick Guide
- Javascript - Functions
- Javascript - Resources
How to preselect a
In this tutorial, we will learn how to preselect a select list item using JavaScript.
It is given an id attribute to be associated with a <label> for accessibility purposes and a name attribute represents the name of the associated data point submitted to the server. <option> element nestled inside the <select> is used to define each menu option.
Each <option> element have a value attribute that contains the data value to submit to the server when that option is selected. If no value attribute is specified, the value is set to the text contained within the element.You can include the selected attribute on an <option> element to make it the default selection when the page first loads.
You can use the <select> element's unique attributes to control it, such as multiple to specify whether multiple options can be selected. And size to specify how many options should be displayed at once. It also accepts most general form input attributes like required, disabled, autofocus, etc.
The selectedIndex Property
The select element's selectedIndex property allows you to specify or return the selected option index from the list. The
index value starts at zero.
If you select multiple items from the list, the index will be returned as the first element in the list. If the list has multiple options, the index of the first item selected will be returned. The number "-1" deactivates all options (if any).
If no options are selected, the selectedIndex property returns -1. First, we'll add a select element to the HTML. We will give this select element a dropdown id.
Syntax
document.getElementById("dropdown_menu").selectedIndex = "1";
The list's ID is obtained through the getElementById() method, and the index of that list is set to the second index via the selectedIndex property.
Example
In this example, we used the HTML <select> element to create two lists. The first list displays the movie genre options, which include Drama, Action, Horror, Comedy, and Noir. The second list includes artists such as Tom Cruise, Brad Pitt, Leonardo DiCaprio, Will Smith, and Dwayne Johnson.
As shown in the output, the selectedIndex property selects the third index from the first list, Horror. According to the output, the second index is preselected from the second list, which is Brad Pitt. The index value begins at 0.
<html> <body> <h3>Preselect a select list using <i>value property</i> in JavaScript</h3> <p id="root">Select type of application from the first list:</p> <select id="dropdown1" name="dropdown1" class="form-control"> <option value="Instagram">Instagram</option> <option value="Snapchat">Snapchat</option> <option value="Facebook">Facebook</option> <option value="Google">Google</option> <option value="WhatsApp">WhatsApp</option> </select> <p id="root">Select the founder from the second list:</p> <select id="dropdown2" name="dropdown2" class="form-control"> <option value="Kevin Systrom"> Kevin Systrom </option> <option value="Evan Spiegel"> Evan Spiegel </option> <option value="Mark Zuckerberg"> Mark Zuckerberg </option> <option value="Sergey Brin"> Sergey Brin </option> <option value="Brian Acton"> Brian Acton </option> </select> <script> var drop1 = document.getElementById("dropdown1"); drop1.value = "Instagram"; var drop2 = document.getElementById("dropdown2"); drop2.value = "Sergey Brin"; </script> </body> </html>
Using the value Property
The value property specifies the element's default value, which will be displayed when the page is loaded. This attribute can be found in form controls and a few other HTML components. The value attribute in HTML and the value property in JavaScript behave differently for certain controls. The value attribute can specify the control's initial value; however, the value property contains the control's actual value. To obtain or set the initial value in JavaScript, use the default Value property.
Syntax
var drop1 = document.getElementById("dropdown_menu");
drop1.value="Instagram";
The getElementById() method is used to obtain the list's ID. This is saved to the variable drop1. The value property is used to select the index of the list with the "Instagram" value.
Example
In this example, we created two lists using the HTML <select> element. In the first list, you can select Instagram, Snapchat, Facebook, Google, and WhatsApp as social media apps. The second list displays the corresponding app founders, such as Kevin Systrom, Evan Spiegel, Mark Zuckerberg, Sergey Brin, and Brian Acton.
The variable drop1 retrieves and stores the first list's element id. The drop1 value is then set to "Instagram" to use the value attribute to select that value. Similarly, the variable drop2 retrieves and saves the second list's element id. The drop2 element is then set to "Sergey Brin" using the value property.
<html> <html> <body> <h3>Preselect a select list using <i>value property</i> in JavaScript</h3> <p id="root">Select type of application from the first list:</p> <select id="dropdown1" name="dropdown1" class="form-control"> <option value="Instagram">Instagram</option> <option value="Snapchat">Snapchat</option> <option value="Facebook">Facebook</option> <option value="Google">Google</option> <option value="WhatsApp">WhatsApp</option> </select> <p id="root">Select the founder from the second list:</p> <select id="dropdown2" name="dropdown2" class="form-control"> <option value="Kevin Systrom"> Kevin Systrom </option> <option value="Evan Spiegel"> Evan Spiegel </option> <option value="Mark Zuckerberg"> Mark Zuckerberg </option> <option value="Sergey Brin"> Sergey Brin </option> <option value="Brian Acton"> Brian Acton </option> </select> <script> var drop1 = document.getElementById("dropdown1"); drop1.value = "Instagram"; var drop2 = document.getElementById("dropdown2"); drop2.value = "Sergey Brin"; </script> </body> </html>
In this tutorial, we have seen two methods to preselect a select list item using JavaScript. The first method is to use the selectedIndex property of JavaScript. The second method uses the value property of JavaScript using the DOM technique.
- Related Articles
- How to preselect Dropdown Using JavaScript Programmatically?
- How to select an item from a dropdown list using Selenium WebDriver with java?
- How to preselect a value in a dropdown list of items in HTML forms?
- How to set the list-item marker type with JavaScript?
- How to select multiple options in a dropdown list with JavaScript?
- How to add a list item in HTML?
- How to insert an item into a C# list by using an index?
- How to remove an item from a C# list by using an index?
- How to set an image as the list-item marker with JavaScript?
- How to set the position of the list-item marker with JavaScript?
- How to randomly select an item from a tuple in Python?
- How to randomly select an item from a string in Python?
- How to display a value when select a JList item in Java?
- How to add an item to a list in Kotlin?
- How to create a dropdown list using JavaScript?
