Javascript - 基于下拉选择的转到 URL（续！）答案

【问题标题】：Javascript - Goto URL based on Drop Down Selections (continued!)Javascript - 基于下拉选择的转到 URL（续！）
【发布时间】：2011-09-08 20:30:42
【问题描述】：

从这里继续：Javascript / jQuery - Goto URL based on Drop Down Selections

一些伟大的人给了我一些代码示例，但我在示例表单中的何处插入代码时遇到了真正的麻烦。

谁能告诉我上一个问题位置中提供的代码应该添加到表单中的哪个位置才能正常工作？

【问题讨论】：

标签： javascript forms select

【解决方案1】：

您需要在您的 JavaScript 文件中的某处将一个函数绑定到表单的 onsubmit 事件，以便它可以做任何您想做的事情。

如果您使用的是 jQuery，请执行以下操作：

$(function(){

  $('form').submit(function(e){

      window.location.href = $('#dd1').val() +
                             $('#dd2').val()+
                             $('#dd3').val();

      e.preventDefault();

    });
});

在这里查看它的工作原理：http://jsfiddle.net/WDtGK/2/

为上下文添加了 HTML

 <form>
      <select class="dropdown" id="dd1">
        <option>http://</option>
        <option>ftp://</option>
        <option>https://</option>
      </select>
      <select class="dropdown" id="dd2">
        <option>google</option>
        <option>yahoo</option>
        <option>bbc</option>
        <option>hotmail</option>
      </select>
      <select class="dropdown" id="dd3">
        <option>.com</option>
        <option>.net</option>
        <option>.co.uk</option>
      </select>
      <input type="submit" name="button" id="button" value="Go!">
  </form>

【讨论】：

有没有办法添加一个额外的功能，在去之前检查 URL，例如，如果最后一个字符是“a”，那么用“b”替换它 -我的 URL 有时包含“+”字符，如果它是 URL 中的最后一个字符，我需要将其删除。所以它基本上需要是“如果最后一个字符是+，删除它”
您可以将 url 存储到一个变量中，然后使用正则表达式。一个非常简单的情况是url = url.replace(/\+$/,'')，它将删除字符串中的最后一个+。
我根本不会使用“+”。而是使用：[$('#dd1').val(),$('#dd2').val(),$ ('#dd3').val()].join("")

【解决方案2】：

 <form>
  <select class="dropdown" id="dd1" style="margin-right:10px;width:130px">
    <option>http://</option>
    <option>ftp://</option>
    <option>https://</option>
  </select>
  <select class="dropdown" id="dd2" style="margin-right:10px;width:130px">
    <option>google</option>
    <option>yahoo</option>
    <option>bbc</option>
    <option>hotmail</option>
  </select>
  <select class="dropdown" id="dd3" style="width:130px;margin-right:20px">
    <option>.com</option>
    <option>.net</option>
    <option>.co.uk</option>
  </select>
  <button id="button" type="button">GO</button> <!-- notice this change -->
  </form>

在 Javascript 中：

$(document).ready(function () {
      $("#button").click(function(){navigate();});
});

function navigate(){
window.location.href = $('#dd1').val() + $('#dd2').val() + $('#dd3').val();
}

【讨论】：