Javascript / jQuery - 基于下拉选择的转到 URL答案

【问题标题】：Javascript / jQuery - Goto URL based on Drop Down SelectionsJavascript / jQuery - 基于下拉选择的转到 URL
【发布时间】：2011-09-07 23:42:23
【问题描述】：

我有 3 个下拉框和一个执行按钮。我需要转到基于 3 个 URL 框中选择的内容构建的 URL - 这是我的代码示例。

  <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>
  <input type="submit" name="button" id="button" value="Go!">
  </form>

因此，例如，如果用户选择 http:// + yahoo + .net - 然后点击“开始”按钮，他们将被发送到 http://yahoo.net 或者如果用户选择 https// + hotmail + 。 com 然后他们被发送到https://hotmail.com

是否有一些 jQuery 或 Javascript 代码可以检测下拉菜单中的选择，然后构建正确的 URL 并在按下“Go”按钮时转到它？

谢谢扎克

【问题讨论】：

标签： javascript jquery build conditional

【解决方案1】：

这样的？

window.location.href = $('#Dropwdown_1').val()+$('#Dropwdown_2').val()+$('#Dropwdown_3').val();

【讨论】：

【解决方案2】：

获取下拉菜单的值

var searcher = document.getElementById("ddlSearch");
var searchDomain =searcher.options[searcher.selectedIndex].text;

其他两个也一样

然后使用 + 连接字符串

var url = searchProtocol + searchDomain + searchTopLevel;

转到页面：

location.href= url;

【讨论】：

【解决方案3】：

@zach

这应该很简单。

使用选择 HTML 标记并为 3 个下拉菜单分配选项
在 JS 中创建一个函数 createURL()。
获取三个框的值。您可以使用 document.getElementById('Select1').options[document.getElementById('Select1').selectedIndex].value 并使用加号连接。
您也可以使用 JQuery 来简化工作。
您可以使用 window.location.href 在同一页面中打开。

【讨论】：

【解决方案4】：

var d1 = $("#dd1").find(":selected").attr("value");
var d2 = $("#dd2").find(":selected").attr("value");
var d3 = $("#dd3").find(":selected").attr("value");

location.href = d1+d2+d3+"";

【讨论】：

我在上面添加了我的表单代码。你能看看并告诉我我会在哪里添加你的代码吗？谢谢
抱歉这么久才回信。我正在度假。它看起来像这样：jsfiddle.net/NVGu6

【解决方案5】：

虽然其他答案有效...我更喜欢以这种方式处理它（使用 jQuery）：

$("form").on("submit", function(e) {
    // Define our global url array
    var url = [];

    // Prevent the form from processing
    e.preventDefault();

    // Loop through the drop down fields, storing the value of each into our "url" array
    $(this).find(".dropdown").each(function() {
        url.push($(this).val());
    });

    // Change the page location
    window.location = url.join("");
});

【讨论】：