Code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>OHAB SCHOOL</title>
<script type="text/javascript" src="images/prototype-1.js"></script>
<script type="text/javascript" src="images/prototype-base-extensions.js"></script>
<script type="text/javascript" src="images/prototype-date-extensions.js"></script>
<script type="text/javascript" src="images/behaviour.js"></script>
<script type="text/javascript" src="images/behaviors.js"></script>
<script type="text/javascript" src="images/datepicker.js"></script>
<link rel="stylesheet" href="images/datepicker.css">
<link rel="stylesheet" href="images/main.css">
<style>
ul{
list-style:none;
padding:0;
margin:10px;
}
li{ margin-bottom:10px}
label {
display: inline-block;
line-height: 1.8;
vertical-align: top;
}
#science, #math{display: none;}
</style>
</head>
<body>
<form name="pogi">
<ul>
<li>
<label for="select_task">Select Subject:</label>
<select name="select_task" id="select_task">
<option value="">---SELECT ONE---</option>
<option value="science">1 - Science</option>
<option value="math">2 - Math</option>
<option value="politics">3 - Politics</option>
<option value="pehm">4 - Pehm</option>
<option value="others">6 - Others</option>
</select>
</li>
</ul>
<div id="contentArea">
<!--SCIENCE-->
<ul id="science">
<li>
<label for="build_lst">Select a Subject:</label>
<select name="build_list" multiple="yes" id="build_lst">
<option>Physics</option>
<option>Chemistry</option>
<option>Anatomy</option>
<option>Botany</option>
<option>Geology</option>
</select>
</li>
<li>
<label for="button1">Exceute</label>
<input id="button1" type='button' name="bld_button" disabled value='COMMIT' />
</li>
</ul>
<!--END SIENCE-->
<!--MATH-->
<ul id="math">
<li>
<label for="build_lst">Select a Subject:</label>
<select name='List1' id='List1'>
<option selected>Choose a Subject</option>
</select>
</li>
<li>
<label for="build_lst">Select a Topic:</label>
<select name='List2' id='List2'>
<option selected>Choose a Topic </option>
</select>
</li>
<li>
<label for="build_lst">Select Topic 2:</label>
<select id="build_2nd" name='List3' size="2" multiple="yes">
<option selected>Choose Topic2</option>
</select>
</li>
<li>
<label for="build_lst">Date Taken:</label>
<input size='5' type="text" name="SelectedDate" id="SelectedDate" class="datetimepicker" />
</li>
<li>
<label for="build_lst">Execute:</label>
<input id="button2" type='button' name="bld_button2" disabled value='COMMIT' />
</li>
</ul>
<!--END MATH-->
</div>
</form>
<script type='text/javascript'>
//Start cross browser add listener function
function addEvent(elem, event, fn) {
function listenHandler(e) {
var ret = fn.apply(this, arguments);
if (ret === false) {
e.stopPropagation();
e.preventDefault();
}
return(ret);
}
function attachHandler() {
var ret = fn.call(elem, window.event);
if (ret === false) {
window.event.returnValue = false;
window.event.cancelBubble = true;
}
return(ret);
}
if (elem.addEventListener) {
elem.addEventListener(event, listenHandler, false);
} else {
elem.attachEvent("on" + event, attachHandler);
}
}
//End cross browser add listener function
function UpdateContent(){
var c = document.getElementById("contentArea");
var items = c.getElementsByTagName("ul");
for (var i = 0; i < items.length; ++i) {
if (this.value == items[i].id){
items[i].style.display = 'block';
} else {
items[i].style.display = 'none';
}
}
}
function enable_bld_button(buttonSel){
document.getElementById(buttonSel).disabled = false;
}
function BuildAlert(buildID) {
alert("You have selected: " + getAllSelections(document.getElementById(buildID)));
}
function getAllSelections(box) {
var options = box.options;
var selectedOptions = [];
for (var i = 0; i < options.length; i++){
if (options[i].selected){
selectedOptions.push(options[i].value);
}
}
return selectedOptions;
}
function fillSelect(el, arr){
var select = document.getElementById(el);
document.getElementById(el).options.length = 1;
document.getElementById("build_2nd").options.length = 1;
for (var i = 0; i < arr.length; ++i) {
var option = document.createElement("option");
option.text = arr[i];
option.value = arr[i];
select.appendChild(option);
}
}
var ohabo = [];
ohabo["startList"] = ["addition","subtraction"];
ohabo["addition"] = ["whole","integer","fraction"];
ohabo["subtraction"] = ["easy","hard","difficult"];
ohabo["whole"] = ["whole Stuff 1","whole Stuff 2","whole Stuff 3"];
ohabo["integer"] = ["integer Stuff 1","integer Stuff 2","integer Stuff 3"];
ohabo["even"] = ["even Stuff 1","even Stuff 2","even Stuff 3"];
addEvent( document.getElementById("select_task"), 'change', UpdateContent );
addEvent( document.getElementById("build_lst"), 'focus', function(){enable_bld_button('button1')} );
addEvent( document.getElementById("button1"), 'click', function(){BuildAlert('build_lst')} );
addEvent( document.getElementById("List1"), 'change', function(){fillSelect('List2', ohabo[this.value])} );
addEvent( document.getElementById("List2"), 'change', function(){fillSelect('build_2nd', ohabo[this.value])} );
addEvent( document.getElementById("List2"), 'change', function(){fillSelect('build_2nd', ohabo[this.value])} );
addEvent( document.getElementById("List2"), 'change', function(){fillSelect('build_2nd', ohabo[this.value])} );
addEvent( document.getElementById("build_2nd"), 'focus', function(){enable_bld_button('button2')} );
addEvent( document.getElementById("button2"), 'click', function(){BuildAlert('build_2nd')} );
addEvent( window, 'load', function(){fillSelect('List1', ohabo["startList"])} );
</script>
</body>
</html>
Reply With Quote
Originally Posted by Pullo
Bookmarks