试图让2个下拉框指向一个URL

时间:2013-03-26 05:58:13

标签: html

所以我想在我的网站上有一个包含2个下拉框和一个提交按钮的页面。单击时,提交按钮将指向一个URL,然后将其带到新页面。 该URL将基于下拉菜单中选择的任何内容。

例如: 下拉1有选项A和B. 下拉2有选项1和2

然后每个组合都会有不同的网址 A1指向URL-1 A2指向URL-2 B1指向URL-3 B2指向URL-4

我真的不太了解编码,并且在过去的3个小时里一直在寻找一种方法,我甚至不知道如何谷歌它。我非常感谢在这一点上我能得到的任何帮助。先感谢您! :)

以下是我的投递箱中的代码。我编辑了选项以使示例与A,B,1和2相匹配。

<html>
<body>
<form>
<select id="list1t">
  <option>Select one</option>
  <option>A</option>
  <option>B</option>
</select>
</form>
<form>
<select id="list2">
  <option>Select one</option>
  <option>1</option>
  <option>2</option>
</select>
</form>
</body>
</html>

1 个答案:

答案 0 :(得分:1)

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var url;
$(function(){
$('#link').click(function(){
    var val1=$('#first').val();
    var val2=$('#second').val();
    if(val1=='A'){
        if(val2=='1'){
              url="URL1";
        }
        else{
              url="URL2";
        }
    }else{
        if(val2=='1'){
              url="URL3";
        }
        else{
              url="URL4";
        }
    }
    window.location.href=url;
});
});
</script>

html将是

<select id="first">
    <option value="A" selected>A</option>
    <option value="B">B</option>
</select>
<select id="second">
    <option value="1" selected>1</option>
    <option value="2">2</option>
</select>

您可以使用链接进行点击。不需要表格或提交按钮

<a href="#" id="link">BUTTON</a>