HTML | Drop-down list without selection

by Zoltan Boros

HTML

<script>
const print = (text) => {
	out.innerHTML += `${text}\n`;
};
</script>

<p>
  None of the drop-down list items are selected initially.
</p>

<select id="dropDownList"
  oninput="print(`[drop-down list oninput]  value: [${this.value}]`);"
  onchange="print(`[drop-down list onchange]  value: [${this.value}]`);"
>
  <option>item 1</option>
  <option>item 2</option>
</select>

<button type="button" id="printButton">print drop-down list's value</button>

<pre id="out"></pre>

JavaScript

const dropDownList = document.getElementById('dropDownList');
const printButton = document.getElementById('printButton');
const out = document.getElementById('out');

const printDropDownListValue = () => {
	print(`drop-down list's value: [${dropDownList.value}]`);
};


printButton.addEventListener('click', printDropDownListValue);