<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
document.addEventListener('DOMContentLoaded', () => {
const select = document.querySelector('select')
const p = document.querySelector('p')
select.addEventListener('change', (event) => {
const options = event.currentTarget.options
const index = event.currentTarget.options.selectedIndex
p.textContent = `select : ${options[index].textContent}`
})
})
</script>
</head>
<body>
<select>
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
</select>
<p> select : a</p>
</body>
</html>### Key Components and Functionality
- **`<select>` Element**: Contains four `<option>` elements (labeled 'a', 'b', 'c', and 'd'). Users can select one of these options from the dropdown menu.
- **`<p>` Element**: Initially displays "select : a". This text will be updated to reflect the currently selected option in the `<select>` dropdown menu.
- **JavaScript Logic**:
- The script first selects the `<select>` and `<p>` elements using `document.querySelector`.
- An event listener is attached to the `<select>` element to listen for `change` events, which occur whenever the user selects a different option from the dropdown.
- When a `change` event is detected, the callback function retrieves the list of options (`event.currentTarget.options`) and the index of the currently selected option (`selectedIndex`).
- It then updates the text content of the `<p>` element to display "select : " followed by the text content of the selected option (`options[index].textContent`).
### How It Works
When the user selects an option from the dropdown menu, the script dynamically updates the `<p>` element to indicate which option is currently selected. For example, if the user selects the option 'b', the `<p>` element's text will update to "select : b".
### Practical Use
This pattern is commonly used in forms and web applications to display or use the value of a selected option in real-time without submitting a form or reloading the page. It enhances the user experience by providing immediate feedback and can be used for various purposes, such as dynamically updating other form fields, displaying additional information based on the selection, or filtering data on a webpage.
### Conclusion
This example showcases the basic principles of dynamic content update based on user input, illustrating the power of JavaScript event listeners and DOM manipulation to create interactive web pages. It provides a simple yet effective way to respond to user actions and update the page content accordingly.
'개념 > 혼자 공부하는 Javascript' 카테고리의 다른 글
| chapter 7) localStroage (0) | 2024.12.18 |
|---|---|
| chapter 7) Manipulating (1) | 2024.12.17 |
| chapter 6) Add object properties dynamically (1) | 2024.12.15 |
| chapter 6) Array_Copy (0) | 2024.12.14 |
| chapter 6) check undefined type (1) | 2024.12.13 |