Core JavaScript

Set a Select Input

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

SetASelectInput.html

<!DOCTYPE html>
<html>
	<head>
		<title>XoaX.net's Javascript</title>
		<script type="text/javascript" src="SetASelectInput.js"></script>
	</head>
	<body onload="fnInitialize()">
		<span>Hold <i>Ctrl</i> or <i>Shift</i> for Multiple Selections</span>
		<form>
			<!-- Allow for multiple selections. The default size is 4, but we only have 3 options -->
			<select id="idKings" size="3" multiple>
				<option value="C" selected>Caspar</option>
				<option value="M">Melchior</option>
				<option value="B" selected>Balthazar</option>
			</select>
			<!-- Allow only single selections with a selected option -->
			<select id="idTrinity">
				<option value="F">Father</option>
				<option value="S" selected>Son</option>
				<option value="H">Holy Spirit</option>
			</select>
			<!-- Allow only single selections with a blank option -->
			<select id="idEvangelists">
				<option value="none" selected disabled hidden>Select an Option</option>
				<option value="1">Matthew</option>
				<option value="2">Mark</option>
				<option value="3">Luke</option>
				<option value="4">John</option>
			</select>
			<!-- Allow only single selections with an undisplayed selected option -->
			<select id="idApostles">
				<option style="display:none" selected="selected" value=""></option>
				<option value="1">Peter</option>
				<option value="2">Paul</option>
				<option value="3">James</option>
				<option value="4">Andrew</option>
			</select>
			<!-- Allow only single selections; unselected in the fnInitialize() function -->
			<select id="idFeasts">
				<option value="1">Christmas</option>
				<option value="2">Ascension</option>
				<option value="3">Easter</option>
			</select>
			<hr />
			<button type="button" onclick="fnSetSelections()">Set Selections</button>
			<button type="button" onclick="fnClearSelections()">Clear Selections</button>
	</body>
</html>

SetASelectInput.js

function fnInitialize() {
	let qFeastsSelect = document.getElementById("idFeasts");
	// Either of these work to clear the selection and make it blank.
	//qFeastsSelect.selectedIndex = -1;
	qFeastsSelect.value="";
}


function fnSetSelections() {
	let qKingsSelect = document.getElementById("idKings");
	let qTrinitySelect = document.getElementById("idTrinity");
	let qEvangelistsSelect = document.getElementById("idEvangelists");
	let qApostlesSelect = document.getElementById("idApostles");
	let qFeastsSelect = document.getElementById("idFeasts");
	qKingsSelect[0].selected = true;
	qKingsSelect[1].selected = true;
	qKingsSelect[2].selected = false;
	qTrinitySelect.value = "H";
	qEvangelistsSelect.value = "3";
	qApostlesSelect.selectedIndex = 3;
	qFeastsSelect[2].selected = true;
}

function fnClearSelections() {
	let qKingsSelect = document.getElementById("idKings");
	let qTrinitySelect = document.getElementById("idTrinity");
	let qEvangelistsSelect = document.getElementById("idEvangelists");
	let qApostlesSelect = document.getElementById("idApostles");
	let qFeastsSelect = document.getElementById("idFeasts");
	// Clear all selections in a multiple selector
	for (i = 0; i < qKingsSelect.options.length; ++i) {
		qKingsSelect[i].selected = false;
	}
	qTrinitySelect.selectedIndex = -1;
	qEvangelistsSelect.selectedIndex = 0;
	qApostlesSelect.value="";
	qFeastsSelect.selectedIndex = -1;
}
 

Output

 
 

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