Html 如何根据以前的选择在twitter引导中为typeahead创建新列表？

我在这里看到过引导型typeahead插件的分叉，如下图所示：

但是，我无法理解如何构建web应用程序所需的表单元素。基本上，我希望我的web应用程序模拟以下网站提供的功能：

我需要3个自动完成的表格，就像他们在那个网站上一样。。但是我想使用Twitter引导，因为我的web应用程序的其余部分都在引导中。我需要像大学一样的第一个自动完成。。。使用引导型typeahead插件很容易做到这一点。我已经把这部分弄明白了。现在，下一个使用autocomplete的下拉列表是它变得复杂的地方

由于这个StackOverflow问题，我已经学会了如何进行提前打印下拉：

现在，我只需要一种方法来动态生成下拉列表的数据源，该数据源基于选择的学院和选择的系。此外，选择合适的课程（第三个下拉列表）应该会将我重定向到特定页面（例如：site.com/college/coursename.html）

我如何使用Twitter引导Typeahead实现这一点

数据示例：

学院：

• 乌特克斯
• 乌米米
• 南加州大学
• 斯坦福大学

部门：

---

• 1,2,3以下是一些应该让你开始的东西：

  //此包装仅用于在JSFIDLE上显示（并且因为它很有趣）
  !职能（学院、部门）{
  变量$one=$（“#one”）；
  变量$two=$（'two'）；
  var loadSourceForTwoWith=函数（项）{//重置部门的函数，接受学院名称
  $2.data（'typeahead'，false）.val（“”）；//清除部门
  ajaxLoadDepartments（项，函数（部门）{//此函数应该是ajax调用的成功
  $2.typeahead（{//这个ajax调用应该返回'item'学院的系
  来源：departments//作为字符串数组
  }).focus（）；
  });
  };
  一美元一张({
  资料来源：大学，
  更新程序：函数（项）{//item已选中，应返回项
  loadSourceForTwoWith（项目）；
  退货项目；
  }
  });
  }（/*不要为下面的内容操心太多，只需将上面的内容与实际代码（ajax）和数据结合使用即可*/
  ['UTEXAS'，'UMIAMI'，'USC'，'STANFORD']，
  函数（项，回调）{
  var jsonResponse={
  ‘斯坦福’：[‘X1’、‘X2’、‘X3’]，
  ‘USC’：[‘X4’、‘X5’、‘X6’]，
  ‘UMIAMI’：[‘X7’、‘X8’、‘X9’]，
  'UTEXAS'：['XA'，'XB'，'XC']
  };
  $.ajax（“/echo/json/”{
  键入：“post”，
  数据：{json:json.stringify（jsonResponse[item]）}
  }).完成（功能（数据）{
  回调（数据）；
  });
  }
  );
  

  这个简单的例子向您展示了如何：
  • 为所选项目设置自己的回调：请参阅更新程序
  • 重置typeahead源（非常困难的方法）：请参阅

    .data（'typeahead'，false）

  • 使用回调函数异步加载
  • 胡闹

  ---

  在进行任何复制/粘贴之前，您应该知道这只使用了标准的typeahead插件，并且没有对错误处理（输入、ajax错误、延迟用户感知）进行任何操作

  //此包装仅用于在JSFIDLE上显示（并且因为它很有趣）
  !职能（学院、部门）{
  变量$one=$（“#one”）；
  变量$two=$（'two'）；
  var loadSourceForTwoWith=函数（项）{//重置部门的函数，接受学院名称
  $2.data（'typeahead'，false）.val（“”）；//清除部门
  ajaxLoadDepartments（项，函数（部门）{//此函数应该是ajax调用的成功
  $2.typeahead（{//这个ajax调用应该返回'item'学院的系
  来源：departments//作为字符串数组
  }).focus（）；
  });
  };
  一美元一张({
  资料来源：大学，
  更新程序：函数（项）{//item已选中，应返回项
  loadSourceForTwoWith（项目）；
  退货项目；
  }
  });
  }（/*不要为下面的内容操心太多，只需将上面的内容与实际代码（ajax）和数据结合使用即可*/
  ['UTEXAS'，'UMIAMI'，'USC'，'STANFORD']，
  函数（项，回调）{
  var jsonResponse={
  ‘斯坦福’：[‘X1’、‘X2’、‘X3’]，
  ‘USC’：[‘X4’、‘X5’、‘X6’]，
  ‘UMIAMI’：[‘X7’、‘X8’、‘X9’]，
  'UTEXAS'：['XA'，'XB'，'XC']
  };
  $.ajax（“/echo/json/”{
  键入：“post”，
  数据：{json:json.stringify（jsonResponse[item]）}
  }).完成（功能（数据）{
  回调（数据）；
  });
  }
  );
  

  这个简单的例子向您展示了如何：
  • 为所选项目设置自己的回调：请参阅更新程序
  • 重置typeahead源（非常困难的方法）：请参阅

    .data（'typeahead'，false）

  • 使用回调函数异步加载
  • 胡闹

  ---

  在进行任何复制/粘贴之前，您应该知道，这只使用了标准的typeahead插件，没有对错误处理（输入、ajax错误、延迟用户感知）进行任何操作。
  谢谢您的输入！这很好，但有3个缺点，其中一个对我来说很重要。1> 我想要两个下拉列表，就像您在JSFIDLE中显示的一样，但是只有第一个“department”应该填充源html文件中的数据。。i、 e数据源属性可以在html文件中内联填充，就像在twitter引导示例中一样，其中包含sec数据的状态（）