Im looking for a simple script in javascript that i can extend, at a basic level Im looking to show 1 field based on which option from a <select> the user chooses.
<select id="options">
<option value="spoon">Spoon</option>
<option value="form">Fork</option>
</select>
if select=spoon {
<input>enter your favorite soup</input>
} else {
<input>Your gonna need a knife</input>
}
Simple JS is the key!
You can make use of the onchange attribute of the <select> element to execute some Javascript code on every change of the dropdown.
<select onchange="myFunction(this)">
(you see that I passed the dropdown element itself as method argument, this is just done for convenience)
You can use the element.options to get all options and element.selectedIndex to get the index of the currently selected option.
function myFunction(dropdown) {
var selectedOption = dropdown.options[dropdown.selectedIndex].value;
}
You can use document.getElementById() to retrieve any element by id. Imagine that you've the following input elements:
<input type="text" id="foo">
<input type="text" id="bar">
then you can get them as follows:
var foo = document.getElementById('foo');
var bar = document.getElementById('bar');
You can use the element.style.display to change the CSS display property. A value of block means show and a value of none means hide. Now do the math:
function myFunction(dropdown) {
var selectedOption = dropdown.options[dropdown.selectedIndex].value;
var foo = document.getElementById('foo');
var bar = document.getElementById('bar');
if (selectedOption == 'spoon') {
foo.style.display = 'none'; // Hide foo.
bar.style.display = 'block'; // Show bar.
} else {
foo.style.display = 'block'; // Show foo.
bar.style.display = 'none'; // Hide bar.
}
}
To learn more about Javascript and HTML DOM, I recommend this tutorial.
I think i posted this somewhere else on SO, but couldnt find that post now. It could be something for you to build on.
Look ma, no jQuery! (yay!)
<body>
<select id="mySelect" onchange="npup.doSelect(this);">
<option value="">Npup says 'select'</option>
<!-- the option values are suffixes for the elements to show -->
<option value="0">zero</option>
<option value="1">one</option>
<option value="2">two</option>
</select>
<!-- container for any elements that are to be in the game -->
<div id="mySpecialElements">
<!-- these have ids that end with an index for easy retrieval in "findeElement" function below-->
<div id="npup0" class="hidden">div 0</div>
<div id="npup1" class="hidden">div 1</div>
<div id="npup2" class="hidden">div 2</div>
</div>
<script type="text/javascript">
window.npup = (function (containerId, baseId) {
// save the container of your special element
var elementsContainer = document.getElementById(containerId);
var baseId = baseId;
function doSelect(select) {
// get value of select
var idx = select.selectedIndex;
if (idx<0) {return;}
var value = select.options[idx].value;
// find element based on the value of the select
var targetDiv = findElement(value);
if (!targetDiv) { return;} // didn't find the element, bail
// do magic..
hideAll(elementsContainer);
showElement(targetDiv);
}
// retrieve some element based on the value submitted
function findElement(value) {
return document.getElementById(baseId+value);
}
// hide all element nodes within some parent element
function hideAll(parent) {
var children = parent.childNodes, child;
// loop all the parent's children
for (var idx=0, len = children.length; idx<len; ++idx) {
child = children.item(idx);
// if element node (not comment- or textnode)
if (child.nodeType===1) {
// hide it
child.style.display = 'none';
}
}
}
// display a certain element
function showElement(element) {
element.style.display = '';
}
// hide all on page load (might want some extra logic here)
hideAll(elementsContainer);
// export api to use from select element's onchange or so
return {
doSelect: doSelect
};
})('mySpecialElements', 'npup'); // give the routine a container id of your special elements, and the base id of those elements
</script>
</body>