select 列表更改的按钮 href 将无法解析 (javascript:window.open(window.variable))

Question

我正在使用 javascript 根据 select 列表中用户的 selection 成功更改按钮的 href。然而，href 值是一个 javascript 变量，在我的代码更改后无法解析。

代码如下：

var clickTag1 = "http://www.myexampledomain.com/test-1";
var clickTag2 = "http://www.myexampledomain.com/test-2";
var clickTag3 = "http://www.myexampledomain.com/test-3";
var clickTag4 = "http://www.myexampledomain.com/test-4";

(function() {
 var form = document.forms['swiftForm'];
 
 //document.getElementById('cT_target').href = 'javascript:window.open(window.' + this.value + ')';
 var trigger = document.getElementById('cT_toggle');
 trigger.onchange = function() {

  var link = document.getElementById('cT_target');
  link.href = 'javascript:window.open(window.' + this.value + ')';
 }
})();

<form id="swiftForm">
    <div class="styledSelect">
     <select name="cT_toggle" id="cT_toggle">
      <option value="clicktag1">2 meters</option>
      <option value="clicktag2">4 meters</option>
      <option value="clicktag3">6 meters</option>
      <option value="clicktag4">8 meters</option>
     </select>
   </div>
   <div class="swiftSubmit">
     <a id="cT_target" href="javascript:window.open(window.clickTag1)">Calculate</a>
   </div>
</form>

页面加载后，按钮 href 按预期工作（打开一个包含目标 clickTag URL 的新 window）。但是，通过 select 从 select 列表中获取新值更改 href 后，href 不再打开目标 clickTag URL，而只是打开一个空的 window .

问题似乎是 javascript 变量值 (clickTag) 在页面 HTML 中更改后不再计算。

我想知道我是否遗漏了一些技巧？

Answer 1

最好的方法是不要在 C_Toggle 上执行 onchange 操作，而是在 link 上触发一个函数，该函数将根据 [=] 的选定值重定向文档12=].

Answer 2

更改 <select> 元素中的值以匹配您的变量名称。

HTML:

<select name="cT_toggle" id="cT_toggle">
    <option value="clickTag1">2 meters</option>
    <option value="clickTag2">4 meters</option>
    <option value="clickTag3">6 meters</option>
    <option value="clickTag4">8 meters</option>
</select>

Answer 3

Javascript 区分大小写 select 的值应与变量名称相匹配

改变

<select name="cT_toggle" id="cT_toggle">
    <option value="clicktag1">2 meters</option>
    <option value="clicktag2">4 meters</option>
    <option value="clicktag3">6 meters</option>
    <option value="clicktag4">8 meters</option>
</select>

至

<select name="cT_toggle" id="cT_toggle">
    <option value="clickTag1">2 meters</option>
    <option value="clickTag2">4 meters</option>
    <option value="clickTag3">6 meters</option>
    <option value="clickTag4">8 meters</option>
</select>

select 列表更改的按钮 href 将无法解析 (javascript:window.open(window.variable))

Button href changed by select list won't resolve (javascript:window.open(window.variable))

javascript

html

select

window.open