Bi-directional Dependent Dynamic List Menu

[paakwesi]

I'm looking to modify the javascript behavior on
http://research.yale.edu/~kamusi/exercises/learners/index.php to do
two things:

Initial State: Both menus are populated with all their entries (as is
the case currently).

1. On selecting a topic, the Skills menu will only show those Topics
with dependencies (which will be provided) and vice versa.

2. On clicking the "Go" button, whichever combination (or just a Topic
or Skill) is selected and passed to the URL field.

Ordinarily, I'm a PHP dude and sweated enough to get the current
javascript working (javascript too finicky). On doing some research
(ie googling ), I have come across only uni-directional dependencies
(ie, "Skills" is dependent on "Topics", not vice versa). Anyone has any
idea of how to get this bidirectional dependency without creating some
sort of looping behavior(how I see it if I were just to tweak the
uni-directional code that DreamWeaver for example generates)?
Thanks,
paa.kwesi

 

[alexandre damiron]

Fortunalty, Javascript can handle two dimensional arrays. This simple
script proove it:
var arraylev1 = new Array(2);
arraylev1[0] = new Array(4);
arraylev1[0][0] = "Topic1";
arraylev1[0][1] = "Skill1";
arraylev1[0][2] = "Skill4";
arraylev1[0][3] = "Skill5";
arraylev1[1] = new Array(4);
arraylev1[1][0] = "Topic2";
arraylev1[1][1] = "Skill1";
arraylev1[1][2] = "Skill7";
arraylev1[1][3] = "Skill12";
for(ii=0; ii<arraylev1.length; ii++){
for(iii=0; iii<arraylev1[ii].length; iii++){
alert(arraylev1[ii][iii]);
}
}
According to this, finding Skills related to an Topic should be easy.
The other direction requires you to write a custom parsing function, as
Javascript is not very rich in built-in array sorting functions.
Use that features to populate an array variable, and then parse it to
change the contents of your <SELECT AREA> by using the innerhtml method
or the DOM (appendChild, removeChild, setAttribute, etc...).
The URL will be computed using the {selectformforskillsName}.value and
the {selectformfortopicsName}.value properties. Generate a querystring
then a window.location.replace or auto-submit your form, which is better.

Another solution is remote scripting, but I do not think it is necessary.

This is some general ideas. I'd be pleased to give you more details.

(e-mail address removed) a écrit :