Question

Javascript新手。这是故事：我需要创建一个动态链接，重定向到6个不同的课程之一，具体取决于用户选择的选项。这可以通过3个下拉菜单或3组复选框完成：

IMG。 1：http://i.imgur.com/oi8WYYv.png

或

IMG。 2：http://i.imgur.com/tRIdxBv.png

我尝试将stackoverflow中的几个示例中的代码组合在一起，但它很乱......任何想法都受到高度赞赏。

[编辑06.04.2015]

感谢你的建议，但故事有点复杂：

链接是固定的，即通过＆＃34; generate＆＃34;来编写链接非常复杂。函数（它们类似于：base_url + id_1 + base_url_2 + id_2 + base_url_3）
有6门不同的课程，每门课程都有自己的链接：
a）普通用户 - 英文
b）普通用户 - 德语
c）用户可访问机密数据 - 英文
d）用户可访问机密数据 - 德语e）用户经理 - 英文
f）用户经理 - 德文

要选择正确的课程，您需要符合多个表格的标准。我认为应该有很多＆＃34; if＆＃34;声明，以便通过问题选择正确的课程。或者问题不正确......

Answer 1

这是相当微不足道的;您所要做的就是检查每个select代码的值，并相应地设置锚点的href。

这是一个很小的模型：

window.onload = function(){
  var select = document.getElementById('language');
  var anchor = document.getElementById('next');
  
  select.onchange = function(){
    anchor.href = select.value;
  }
}

Which is your preferred language? 
<select id="language">
  <option value="#">--------------</option>
  <option value="http://stackoverflow.com/questions/tagged/javascript">JavaScript</option>
  <option value="http://stackoverflow.com/questions/tagged/python">Python</option>
  <option value="http://stackoverflow.com/questions/tagged/c%2b%2b">C++</option>
</select>
<br>
<a id ="next" href="#">Next</a>

基本上，我正在select元素上听onchange，因此可以在所选选项发生变化时更新链接。

如果您没有使用<a>锚标记，而是使用 Next 页面按钮，则可以在重定向用户之前始终检查值：

window.onload = function(){
  var select = document.getElementById('color');
  var next = document.getElementById('next');
  
  next.onclick = function(){
    switch (select.value){
        case '1':
          window.location.href = "http://blog.xkcd.com/2010/05/03/color-survey-results/";
          break;
        case '2':
          window.location.href = "http://www.omglasergunspewpewpew.com/";
          break;
        default:
          break;
    }
  }
}

What is your least favourite colour?
<select id="color">
  <option value="1">puke</option>
  <option value="2">The best color in the world!</option>
</select><br>
<button id="next">Next</button>

基本上，无论你做什么，你都可以检查select.value，并相应地执行一项行动。

Answer 2

初稿，没有工作，但这是我到目前为止最好的：

<script type="text/javascript">

window.onload = function(){
  var language = document.getElementById('lang');
  var confidential = document.getElementById('conf');
  var manager = document.getElementById('mgr');
  var next = document.getElementById('next');

 next.onclick = function(){
 switch (true){
 case language === "isEnglish":
     window.open('link/regular_user_in_English', '_blank'); 
 break;

 case language === "isGerman":
 window.open('link/regular_user_in_German', '_blank');
 break;

 case language === "isGerman" && confidential === "isConf":
 window.open('link/conf_in_German', '_blank');
 break;

 default:    
 break;
     }
  }

 </script>

  Which language would you prefer to do the training in?
  <select id="lang">
    <option value="isEnglish">English</option>
    <option value="isGerman">German</option>
  </select><br />
  Are you a confidential data handler?
  <select id="conf">
     <option value="notConf">No</option>
     <option value="isConf">Yes</option>  
  </select><br />
  Are you a people manager?
  <select id="mgr">
    <option value="notManager">No</option>
    <option value="isManager">Yes</option>
  </select>
  <br />
  <button id="next">Next</button>

JavaScript - 动态链接取决于多个DropDown选择或复选框

2 个答案: