Question

我有3个下拉框和一个go按钮。我需要转到一个基于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”按钮时转到它？

由于扎克

Answer 1

这样的东西？

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

Answer 2

获取下拉列表的值

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

其他两个

相同

然后使用+

连接字符串

var url = searchProtocol + searchDomain + searchTopLevel;

转到页面：

location.href= url;

Answer 3

@zach

这应该很简单。

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

Answer 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+"";

Answer 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("");
});

Javascript / jQuery - 根据下拉选择转到URL

5 个答案: