[英]Javascript / jQuery - Goto URL based on Drop Down Selections
I have 3 drop down boxes and a go button.我有 3 个下拉框和一个 go 按钮。 I need to goto a URL that is built based on what is selected in the 3 URL boxes - here is an example of my code.我需要转到基于 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>
So, for example, if a user selects http:// + yahoo + .net - then hits a "Go" button, they would be sent to http://yahoo.net or if the user selects https// + hotmail +.com then they are sent to https://hotmail.com因此,例如,如果用户选择 http:// + yahoo + .net - 然后点击“开始”按钮,他们将被发送到http或 https.// com 然后它们被发送到https://hotmail.com
Is there some jQuery or Javascript code that would detect the selections from the dropdowns, then built the correct URL and goto it when the "Go" button is pressed?是否有一些 jQuery 或 Javascript 代码可以检测下拉菜单中的选择,然后构建正确的 URL 并在按下“Go”按钮时转到它?
Thanks Zach谢谢扎克
Something like this?像这样的东西?
window.location.href = $('#Dropwdown_1').val()+$('#Dropwdown_2').val()+$('#Dropwdown_3').val();
Get the values of the dropdowns获取下拉列表的值
var searcher = document.getElementById("ddlSearch");
var searchDomain =searcher.options[searcher.selectedIndex].text;
Same for the other two其他两个也一样
Then concatenate strings using the +然后使用 + 连接字符串
var url = searchProtocol + searchDomain + searchTopLevel;
The go to the page: go 到页面:
location.href= url;
@zach @zach
This should be simple.这应该很简单。
While the other answers work... I would prefer handling it in this sort of fashion (using jQuery):虽然其他答案有效......我更喜欢以这种方式处理它(使用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("");
});
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+"";
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.