JavaScript - simulating a matrix
Lets say that you want an answer of some kind being given depending on two user inputs. It very quickly gets very troublesome making lots of IF functions. This matrix script simulates just that, making it easier and quicker for you. Everything is automated, so all you nee to change is the data in the Arrays, then the rest is built for you. The full code is shown below
Code:
<html>
<head>
<title>Changing contents of Drop down :: Acid</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
/* If you have any JavaScript questions please e-mail them to me at:
[email protected]
*/
//The arrays are in this format:
//list[i] = [option1,value1,option2,value2,....,option n, value n]
list1 = new Array()
list1[0] = ["High","1"];
list1[1] = ["Medium","2"];
list1[2] = ["Low","3"];
list1[3] = ["Very-Low","4"];
list2 = new Array()
list2[0] = ["High","2"];
list2[1] = ["Medium","3"];
list2[2] = ["Low","4"];
list2[3] = ["Very-Low","5"];
list3 = new Array()
list3[0] = ["High","3"];
list3[1] = ["Medium","4"];
list3[2] = ["Low","5"];
list3[3] = ["Very-Low","5"];
function change_other_menu(option) {
document.getElementById('spot').innerHTML = "<select name='select2' onChange='do_something(this.value)'>"
document.getElementById('select2').innerHTML += "<option value='" + eval("list"+option)[0][1] + "'>" + eval("list"+option)[0][0] + "</option>";
for (i=0; i<eval("list"+option).length; i++)
{
document.getElementById('select2').innerHTML += "<option value='" + eval("list"+option)[i][1] + "'>" + eval("list"+option)[i][0] + "</option>";
}
document.getElementById('spot').innerHTML += "</select>"
}
function do_something(choice) {
document.getElementById('priority').innerHTML = choice
}
</script>
</head>
<body>
<select name="select" onChange="change_other_menu(this.value)">
<option value="0" selected>Please select Likelyhood</option>
<option value="1">High</option>
<option value="2">Medium</option>
<option value="3">Low</option>
</select>
<br>
The 2nd select:<br>
<span id="spot">
<select>
<option selected>Select on form the above menu first</option>
</select>
</span><br>
<span id="priority"><!-- This is where the priority goes, don't delete it. But you can move in into other thing, ie a table. --></span>
</body>
</html>
