javascript - 转到包含我选择的下拉值的 URL (url.com/dropdownvalue1+dropdownvalue2+etc)

Question

我该如何执行以下操作？ (使用简单的 html 表单和 javascript 或 jquery 无论我需要什么)

1) 将下拉值附加到 URL，如下所示: http://www.url.com/catalogsearch/result/?q=dropdownvalue1+dropdownvalue2

(+符号将保留在那里，如“dropdownvalue1”+“+”+“dropdownvalue2”)

2) 要使用 IF 构建 URL，如下所示: http://www.url.com/catalogsearch/result/?q=customvar

其中 customvar 就像 IF dropdownvalue1 = abc AND dropdownvalue2 = def THEN URL = customurl

当我选择下拉值后单击“提交”时，1 和 2 都会将我发送到该 URL。我怎样才能做到这一点？

我知道如何创建选择并转到 URL，但我希望必须单击“提交”才能转到 URL，而不仅仅是立即转到并附加这些值。

<select id="dropdown">
<option value="">Select</option>
<option value="google">Google</option>
<option value="bing">Bing</option>
</select>


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#dropdown").change(function(){
if ( $("#dropdown option:selected").val() == 'google'){
window.location = 'http://google.com';
}
if ( $("#dropdown option:selected").val() == 'bing'){
window.location = 'http://bing.com';
}
});
});
</script>

提前致谢。

Answer 1

根据选择框的值重定向到 URL

将此按钮添加到您的 HTML

<input type="submit" value="Submit" onclick="url()"/>

按钮包含运行此 JavaScript 函数的 onclick 事件

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
   function url() {
        var value1 = $("#dropdown").val();
        if ( value1 == 'google'){
            window.location.href = 'http://google.com';
        }
        if ( value1 == 'bing'){
            window.location.href = 'http://bing.com';
        }
    }
</script>

根据您的需求进行更改
这是从选择框获取值的行 var value1 = $("#dropdown").val();
如果您想创建更多选择框，只需添加另一个变量来检索数据。
例如var value2 = $("#dropdown2").val();
您还可以编辑 if 语句并使用 window.location 重定向中的变量。

if (value1 == 'google' && value2 == "something"){
    window.location.href = 'http:/google.com?value1='+value1+'&value2='+value2;
}

---

更简单的方法

使用选择框值更改单个 URL。

function url() {
    var value1 = $("#dropdown").val();
    window.location.href = 'http://'+value1+'.com';
}