Question

你有三个下拉菜单：学期，课程，问题。问题下拉列表总是有完整的问题列表。另外两个：学期，课程;他们取决于彼此选择的内容。

你在学期和课程中的选择是：所有学期，学期A，学期B，......，学期N.课程也是如此：所有课程，课程A，课程B，......，课程N.

所以，现在我所拥有的是，每当3个下拉列表中的一个被更改时，就会有一个ajax调用，它会使用所选参数来查找图形数据。这意味着，例如，您可以在课程B的所有学期中找到X问题的图表。或者在所有课程的学期B期间找到X问题。或者最后，在课程A中为课程B提出X问题。

现在，我完美地完成了这项工作。但问题是，在课程和学期中，您将看到该教授的课程和学期的完整列表。这意味着您可以选择不存在的组合。因此，例如，您可以在课程W期间为课程B选择X问题;也许在学期W期间，他教授一门课程，而课程B则不是那门课程。

我的目标是让课程和学期下拉列表相互依赖。在服务器端，我设置了我的查询，例如这些条件，它总是发送我们的对象，其中Object.course是应该在列表上的课程数组，而Object.semester是应该在的课程数组列在名单上：

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.

在所有情况下，数组都包含All作为第一个选项，然后是一些选项，范围从1个附加选项到完整列表。

这是一个jsfiddle，我到目前为止。 http://jsfiddle.net/gFRAZ/1/ 我遇到的问题是，当我删除并重新添加选择选项时，它会发疯并开始删除错误的项目或删除所有项目。并且它不会将我设置为选定的选项保留为所选选项。

我猜测当它重新添加它们时，忽略了Selected属性。

我尝试过搜索SO和互联网，但经过几个小时的游戏，我无法解决问题。我希望有人可以帮助我！谢谢你提前。

示例数据对象：

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

Answer 1

我让它发挥作用了！

以下是更新代码的链接：http://jsfiddle.net/gFRAZ/2/。

我很傻，试图更新错误的列表。一旦我意识到这一点，它就像我预期的那样开始工作。

当课程为ALL时，我需要更新课程列表，而不是学期列表。当学期是全部我需要更新学期列表，没有课程列表。如果两者都是全部或两者都不是全部，则可以使用$('#dropdown').val(dropdownValue);设置值，并且不会触发更改事件。

所以在我的情况下：

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

例如，当两者都没有改变下拉列表时：

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);

有两个相互依赖的下拉列表，其值根据所选内容而变化？

1 个答案: