Having two inter-dependent dropdowns whose values changes depending on what's selected?
<p>You have three dropdowns: Semester, Course, Question. The question dropdowns always has the full list of questions. The other two: Semester, Course; they depend on what each other has selected. </p>

<p>Your options in Semester and Course are: All Semesters, Semester A, Semester B, ... , Semester N. And the same goes for courses: All Courses, Course A, Course B, ... , Course N.</p>

<p>So, right now what I have is that whenever one of the 3 dropdowns gets changed, there is an ajax call and it uses the selected parameters to find the graph data. This means, for example, that you can find the graphs for X Question during All semesters for Course B. Or X Question during Semester B for All Courses. Or finally, X Question during Semester A for Course B. </p>

<p>Now, I got this to work perfectly. But the issue is that in Course and Semester, you're shown the complete list of that professor's courses and semesters. This means you can pick combinations that don't exist. So, for example, you could pick X Question during Semester W for Course B; and maybe during Semester W he taught ONE course, and Course B isn't that course. </p>

<p>My goal then was to have the Course and Semester dropdowns be inter-dependent. On the server side I setup my queries and such for these conditions, and it always sends our an object where Object.course is an array of the courses that should be on the list, and Object.semester is an array of the courses that should be on the list:</p>

<pre><code>if Course and Semester == ALL:
    do: Object.course = all courses, 
        Object.semester = all semesters.

if Course == ALL:
    do: Object.semester = all semesters, 
        Object.course = all courses given during selected semester.

if Semester == ALL:
    do: Object.course = all courses, 
        Object.semester = all semesters when the selected course was given.

else
    do: Object.course = Two options: All, Selected Course,
        Object.semester = Two options: All, Selected Semester.
</code></pre>

<p>In all cases the arrays includes All as the first option, and then a number of options which ranges from 1 additional option, to the full list.</p>

<p>Here is a jsfiddle with what I have so far. 
<a href="http://jsfiddle.net/gFRAZ/1/" rel="nofollow">http://jsfiddle.net/gFRAZ/1/</a>
The problem I have is that when I remove and re-add the select options, it goes crazy and starts deleting the wrong items or deleting all of them. And it doesn't keep the one I set as Selected as the selected option.</p>

<p>I'm guessing that when it re-adds them it's ignoring the Selected property.</p>

<p>I've tried searching around on SO and the internet, but I haven't been able to solve the problem after many hours of playing around. I'm hopeful someone can help me! Thanks in advanced.</p>

<p>A sample data object:</p>

<pre><code>var dropdown = new Object({course:['all', 'Course A', 'Course B'], semester:['all', 'Semester A', 'Semester B']});
</code></pre>
