在表单中选择第三个下拉菜单时自动重定向？答案

【问题标题】：Automatic redirect when selecting 3rd dropdown in a form?在表单中选择第三个下拉菜单时自动重定向？
【发布时间】：2012-10-10 03:13:18
【问题描述】：

我有 3 个预先输入字段：

它们如下：

国家：|___________|

状态：|___________|

城市：|___________|

这是第二个 typeahead 字段的代码（其余类似）：

<input type="text" class="span3" style="margin: 0 auto;"
data-provide="typeahead"  data-items="4"
data-source="["Alabama","Alaska",
               <many more US states>
              ,"Wyoming"]">

现在...我需要两个预先输入字段看起来像下拉菜单，可以按照此处的说明来实现...没问题。

我要问的问题与下面的“最后一个选项”有关：注意：我在 Rails 中构建它，所以 ruby 代码会很好......

占位符案例：

我需要每个下拉列表都有一个默认的占位符文本，它是灰色的。

例如：

国家：|_美国_______|

州：|_爱荷华州______|

城市：|_得梅因____|

缺失值案例：

如果用户输入的城市值在自动完成中不存在，我想向他们显示一个带有链接的下拉列表..

例如：用户在城市字段中输入“yahoo”。这应该会导致输出“那个城市不存在，点击这里搜索它”

点击上面的文字会将我重定向到 Google.com

错误案例：

如果在第一个字段（国家/地区）中未选择任何内容.. 第二个字段应在下拉列表中具有默认值：“请选择一个开始的国家/地区”

最后一个选项：

成功选择城市后，例如：旧金山...我想重定向到新的 html 文件，例如“mysite.com/datastore/calsan.html”（每个选择的前三个字母以小写形式附加一起）

这个最终的 html 文件将被预先生成，其中包含有关“旧金山”城市的相关统计数据和有趣的事实...我还将在数据存储文件夹中预先生成其他城市的有趣事实。

【问题讨论】：

标签： ruby-on-rails ruby drop-down-menu twitter-bootstrap typeahead

【解决方案1】：

在下面查看我的 sn-ps

占位符大小写

<script type="text/javascript">
  $(document).ready(function(){
    $('.combobox').combobox({placeholder: "Type Something.."});
  });
</script>

最后一个选项

<script type="text/javascript">
    $('.combobox').change(function(){
      if($(this).val().length > 0){
        var fileName = $(this).val().substr(0,3); // this is for getting the first 3 characters, apply the same logic wherever necessary
        window.location("/datastrore/" + fileName + ".html");
      }   
    })
</script>

【讨论】：

非常感谢您在上述两种情况下的帮助.. 特别是。 “最后的选择”案例..您/其他人也可以帮助解决另外两个案例吗？
对于缺失值的情况，需要调整combobox js代码。错误案例可以再次使用我上面提到的类似 javascript 来完成
参见此处以供参考：slugbooks.com ...他们是否使用 javascript 来解决案例？如果有，怎么做？
当然，他们是使用 javascript 来做的，但是他们使用的是不同的 js 插件，您使用的插件并没有提供太多的灵活性来执行链接中提到的功能

【解决方案2】：

最后一个选项

似乎有一种简单的方法可以使用内联 javascript 和选项值来做到这一点。我想我会使用这种更简单的方法..

http://webdesign.about.com/od/javascript/f/blfaqddredirect.htm

占位符案例和所有其他案例

http://harvesthq.github.com/chosen/

上面的库解决了我所有的问题，非常强大！它不适用于引导程序，但我不介意引导程序具有可比选项。

【讨论】：