根据两个选择下拉列表中的选择重定向到网页

时间:2011-09-07 08:16:38

标签: javascript

我需要一个针对以下情况的JavaScript解决方案:

我有两个选择下拉菜单。单击提交按钮后,两者的组合将重定向到三个网站之一:

www.exampledomainI
www.exampledomainII
www.exampledomainIII

如果选择“A”,它应该直接进入www.exampledomainI。没有必要选择id =“number”(选择菜单ID =“数字”应该在选择时消失,反之亦然,当选择是其他任何东西,然后在id =“letter”中的“A”)

如果组合(例如A4或C1等)是JavaScript中数组的一部分,那么它应该转到www.exampledomainII。

如果它是第二个数组的一部分,那么它应该转到www.exampledomainIII。

<select id="letter">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

<select id="number">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option> 
  <option>5</option> 
  <option>6</option> 
</select>  

<input type="submit">

非常感谢

3 个答案:

答案 0 :(得分:2)

将元素放在表单中,为选项提供值属性,将onsubmit侦听器附加到表单。如果启用了javascript,请执行逻辑并相应地设置 window.location.href 。如果javascript被禁用,不可用或失败,请让服务器执行逻辑。 e.g。

<form action="..." onsubmit="return doRedirect(this);">
  <select id="letter">
    <option value="A">A
    <option value="B">B
    <option value="C">C
  </select>

  <select id="number">
    <option value="1">1
    <option value="2">2
    <option value="3">3
  </select>  

  <input type="submit">
</form>

<script type="text/javascript">
function doRedirect(form) {
  var letter = form.letter.value;
  var number = form.number.value;

  if ( /* some tests using letter and number */) {
    window.location.href = 'http://whatever.com';
    return false;

  } else if ( /* some other tests using letter and number */) {
    window.location.href = 'http://whatever.com';
    return false;

  } else if ( /* and so on... */) {
    /* whatever */
    return false;
  }
}
</script>

答案 1 :(得分:0)

不能很好地理解你的解释,但这可能说明一点

letter_value = document.getElementById('letter').value;
number_value = document.getElementById('number').value;

if (letter_value == 'A') {
  window.location = 'www.exampledomainI';
}
else {
  //cannot understand your explanation for this cases, but just use if else for each case, for example
  if (letter_value == 'B' && (number_value == 1 || number_value == 3)) {
    window.location = 'www.exampledomainII';
  }

  if () {
    ...
  }
}

答案 2 :(得分:0)

这是一个简单的问题解决方案

    <html>
    <head>
        <script>
            function loadNew()
            {
                selectLetter = document.forms[0].letter.value.toString() + document.forms[0].number.value.toString();
                switch (selectLetter)
                {
                    case "B2", "C1":
                        location.href = "www.exampledomainII.com";
                        break;
                    default:
                        location.href = "www.exampledomainI.com";
                        break;
                }
            }

            function visibilityT()
            {
                if (document.forms[0].letter.value.toString() == "A")
                {
                    document.forms[0].number.style.visibility = "hidden";
                } else {
                    document.forms[0].number.style.visibility = "visible";
                }
            }
        </script>
    </head>
    <body onLoad="visibilityT()">
        <form onSubmit>
        <select name="letter" id="letter" onChange="visibilityT()">
<option>A</option>
<option selected>B</option>
<option>C</option>
</select>

<select name="number" id="number">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option> 
<option>5</option> 
<option>6</option> 
</select>  
            <input type="button" value="submit" onClick="loadNew()">
        </form>
    </body>
</html>