从对象文字获取 link 值，onchange--Javascript/HTML select

Question

我知道如何使用 switch case 例程操作此菜单，但我想将我的 switch case 更改为对象文字。

A部分知道如何获取onchange值并打开一个window。 B 部分知道如何在对象的 name:value 对中找到值，但前提是它被赋予了一个硬编码名称以匹配一个值。我必须结合 A 部分和 B 部分的功能。由于A部分和B部分都是相互独立的，所以将它们结合起来应该是一件简单的事情，但是我已经做了四天了，我不知道如何。

A 部分：此 select 菜单将值属性中的硬编码 link 替换为在对象中用作名称的值。按原样，这会按原样打开选项卡，但我想从 B 部分中名为 "lynk" 的对象中获取 link 的正确对应值。

<select id="sed">
    <option value="" selected>Select:</option>
    <option value="prev" >PREV</option>
    <option value="next">NEXT</option>
    <option value="home">home</option>
    <option value="gimme">contribute</option>
</select>

<script>
document.getElementById('sed').addEventListener ('change', valuu);

function valuu() {
ddd = document.getElementById("sed").value;
window.open(ddd, '_self');
}
</script>

B 部分：此脚本来自在线示例，该示例介绍了一种从对象获取相应值的方法。如果粘贴到控制台，它 returns 是正确的 link 作为字符串。正确答案在脚本的最后一行被硬编码为 'gimme'。我必须用从 select 选项值中获取 onchange 值并在对象中查找相应的 link 的代码替换 'gimme'。

<script>
/*Works when pasted into console*/
function foo(bar) {
  var lynk = {
    'default': (''),
    'next': ('nextly.html'),
    'prev': ('previous.html'),
    'gimme': ('http://patreonx.com/bxaxly'),
    'home': ('index.html')
  };
  return lynk[bar];
}
foo('gimme');
</script>

Answer 1

这应该使它动态化。

function valuu() {
   ddd = document.getElementById("sed").value;
   window.open(foo(ddd), '_self');
}

您可以在一个函数中完成所有这些操作，例如，

document.getElementById('sed').addEventListener ('change', function(e){
   var lynk = {
    'default': (''),
    'next': ('nextly.html'),
    'prev': ('previous.html'),
    'gimme': ('http://patreon.com/bearly'),
    'home': ('index.html')
   };
   window.open(lynk[e.target.value]);
});

从对象文字获取 link 值，onchange--Javascript/HTML select

Get link value from object literal, onchange--Javascript/HTML select

javascript

html-select

onchange

lookup-tables

object-literal