JavaScript - Select Form Change Event

Introducing a simple code example in JavaScript that implements events triggered when changing options in a select form.

In the HTML, a select form tag with various options and the ID 'target' is designated to detect value changes.

<div>
<p id="output">Change the selection.</p>
<select name="fruits" id="target">
	<option value="apple" selected>Apple</option>
	<option value="banana">Banana</option>
	<option value="grape">Grape</option>
</select>
</div>

In CSS, the size for the event target is set.

Additionally, CSS allows specifying styles for the 'focus' pseudo-class when the element is clicked to focus.

#target {
	width: 250px;
	margin: 5px;
	padding: 10px;
	font-size: 24px;
}

#output {
	font-size: 20px;
}

The target element is specified using querySelector(), and 'addEventListener()' is used to set up the 'change' event, triggered when the value in the select form changes.

This code example updates the output area to display the changed value when the event is detected.

// Form element to target
let target = document.querySelector('#target');
// Output area
let output = document.querySelector('#output');

target.addEventListener('change', () => {
	// Actions when value changes
	output.innerHTML  = `Changed to '${target.value}'.`;
});