Explanation:
The <select> element is a form control element that creates a dropdown list. It contains one or more <option> elements, which represent the available options in the list. Users can select an option from the list by clicking on it, and the selected value will be submitted with the form data when the form is submitted.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Select Example</title>
</head>
<body>
<h2>Select your favorite fruit:</h2>
<!-- HTML select element -->
<select id="fruitSelect">
<!-- Options for the dropdown list -->
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
<option value="strawberry">Strawberry</option>
<option value="grape">Grape</option>
</select>
<!-- JavaScript to display selected option -->
<script>
// Get the select element
var selectElement = document.getElementById('fruitSelect');
// Add event listener to listen for changes in selection
selectElement.addEventListener('change', function() {
// Get the selected option's value
var selectedValue = selectElement.value;
// Display the selected value
alert('You selected: ' + selectedValue);
});
</script>
</body>
</html>
In this example:
- We have a
<select>element with the id "fruitSelect". - Inside the
<select>element, we have several<option>elements, each representing a fruit option. - When a user selects an option from the dropdown list, a JavaScript event listener captures the change event and retrieves the selected option's value.
- The selected value is then displayed using an alert box.
This example demonstrates how to create a simple dropdown list using the HTML <select> element and handle user selections using JavaScript.
0 Comments