Core JavaScript

Read a Select Input

This JavaScript program shows how to read a select input form element.

ReadASelectInput.html

<!DOCTYPE html>
<html>
	<head>
		<title>XoaX.net's Javascript</title>
		<script type="text/javascript" src="ReadASelectInput.js"></script>
	</head>
	<body>
		<span>Hold <i>Ctrl</i> or <i>Shift</i> for Multiple Selections</span>
		<form>
			<!-- No values single selection input -->
			<select name="NoValuesSingle" size="3" onchange="fnSelect(this)">
				<option>A</option>
				<option>B</option>
				<option>C</option>
			</select>
			<!-- Values single selection input -->
			<select name="ValuesSingle" size="3" onchange="fnSelect(this)">
				<option value="ValueA">A</option>
				<option value="ValueB">B</option>
				<option value="ValueC">C</option>
			</select>
			<!-- No values multiple selection input -->
			<select name="NoValuesMultiple" size="3" onchange="fnSelect(this)" multiple>
				<option>A</option>
				<option>B</option>
				<option>C</option>
			</select>
			<!-- Values multiple selection input -->
			<select name="ValuesMultiple" size="3" onchange="fnSelect(this)" multiple>
				<option value="ValueA">A</option>
				<option value="ValueB">B</option>
				<option value="ValueC">C</option>
			</select>
		</form>
		<div>Selected Name: <span id="idSelectedName"></span></div>
		<div>Selected Index: <span id="idSelectedIndex"></span></div>
		<div>Selected Value: <span id="idSelectedValue"></span></div>
		<div>Selected Options Indices: <span id="idSelectedOptionIndices"></span></div>
		<div>Selected Options Values: <span id="idSelectedOptionValues"></span></div>
		<div>Selected Options Text: <span id="idSelectedOptionText"></span></div>
	</body>
</html>

ReadASelectInput.js

function fnSelect(qSelect) {
	document.getElementById("idSelectedName").innerHTML = qSelect.name;
	document.getElementById("idSelectedIndex").innerHTML = qSelect.selectedIndex;
	document.getElementById("idSelectedValue").innerHTML = qSelect.value;
	document.getElementById("idSelectedOptionIndices").innerHTML = "";
	document.getElementById("idSelectedOptionValues").innerHTML = "";
	document.getElementById("idSelectedOptionText").innerHTML = "";
	for(var i = 0; i < qSelect.selectedOptions.length; ++i){
		document.getElementById("idSelectedOptionIndices").innerHTML += qSelect.selectedOptions[i].index + "  ";
		document.getElementById("idSelectedOptionValues").innerHTML += qSelect.selectedOptions[i].value + "  ";
		document.getElementById("idSelectedOptionText").innerHTML += qSelect.selectedOptions[i].text + "  ";
	}
}
 

Output

 
 

© 2007–2025 XoaX.net LLC. All rights reserved.