0

您有三个下拉菜单：学期、课程、问题。问题下拉列表始终包含完整的问题列表。另外两个：学期，课程；它们取决于彼此的选择。

您在学期和课程中的选项是：所有学期、学期 A、学期 B、...、学期 N。课程也是如此：所有课程、课程 A、课程 B、...、课程 N。

所以，现在我所拥有的是，只要 3 个下拉菜单之一发生更改，就会有一个 ajax 调用，它使用选定的参数来查找图形数据。这意味着，例如，您可以在课程 B 的所有学期中找到 X 问题的图表。或在所有课程的学期 B 中找到 X 问题的图表。或者最后，课程 B 在 A 学期的 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 的选项作为选定选项。

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

我曾尝试在 SO 和互联网上搜索，但经过数小时的游戏后，我无法解决问题。我希望有人能帮助我！先谢谢了。

示例数据对象：

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

1 回答 1

1

我让它工作了！

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

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

当课程是全部时，我需要更新课程列表，而不是学期列表。当学期是全部时，我需要更新学期列表，而不是课程列表。当两者都为 All 或两者都不是 All 时，您可以使用设置值$('#dropdown').val(dropdownValue);，它不会触发 Change 事件。

所以在我的情况下：

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);
于 2012-11-11T04:33:58.440 回答