Question

我有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"]">

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

我提出的问题涉及＆＃34;最后选项＆＃34;下面：注意：我在Rails中构建它，所以ruby代码会很好......

占位符案例

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

例如：

国家/地区：| _ 美国 __ _ __ _ _ |

州：| _ IOWA __ _ __ _ |

城市：| _ DES MOINES ____ |

缺少价值案例

如果用户输入自动填充中不存在的City值，我想向他们显示带有链接的下拉列表。

例如：用户输入＆＃34; yahoo＆＃34;在城市领域。这应该导致输出＆＃34;那个城市不存在，点击这里搜索它＆＃34;

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

错误案例：

如果在第一个字段（国家/地区）中未选择任何内容，则第二个字段在下拉列表中应具有默认值：＆＃34;请选择要开始的国家/地区＆＃34;

最后一个选项：

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

这个最终的html文件将被预先生成，并将有关于该城市的相关统计数据和有趣的事实＆＃34;旧金山＆＃34; ...我还将为其他城市提供有趣的事实。数据存储文件夹。

Answer 1

请参阅下面的代码段

占位符案例

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

Answer 2

最后一个选项

使用内联javascript和选项值似乎有一种简单的方法。我想我会用这种更简单的方式......

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

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

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

上面的库解决了我的所有问题，非常强大！它不是为了引导程序，但我不介意，直到bootstrap有一个类似的选项。

在表单中选择第3个下拉列表时自动重定向？

2 个答案: