CODEWITHSUNDEEP
jquery
Cesar Andreu
Cesar Andreu

Reputation: 177

Having two inter-dependent dropdowns whose values changes depending on what's selected?

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.

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.

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.

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.

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:

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.

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.

Here is a jsfiddle with what I have so far. http://jsfiddle.net/gFRAZ/1/ 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.

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

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.

A sample data object:

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

Upvotes: 0

Views: 256

Answers (1)

Cesar Andreu
Cesar Andreu

Reputation: 177

I got it to work!

Here's a link to the updated code: http://jsfiddle.net/gFRAZ/2/ .

I was being silly and trying to update the wrong lists. Once I realized that, it started working as I expected.

When Course is ALL I need to update the Course list, not the Semester list. When Semester is ALL I need to update the Semester list, no the Course list. When both are All or when both are not All, you can set the value using $('#dropdown').val(dropdownValue); and it doesn't trigger the Change event.

So in my case:

if both = ALL
    Get the full link for both and set both values to all.
if Semester = ALL
    Change the Semester options
if Course = ALL
    Change the Course options
if neither are ALL
    Change both so that they only have ALL and the current selected value

For example, when changing the dropdowns when neither are all:

var semesterVal = $('#semester').val();
var courseVal = $('#course').val();

//For each that will populate the semesterArray.

//For each that will populate the courseArray.

$('#course').empty();
$('#semester').empty();

$('#semester').append(semesterArray);
$('#course').append(courseArray);

$('#course').val(courseArray);
$('#semester').val(semesterArray);

Upvotes: 1

Related Questions