Javascript 选择更改图像和链接

当用户在

元素中选择

时，我试图更改两件事，一个链接和一个图像

<select onchange="document.getElementById('pagelink').href = this.link; document.getElementById('image').src = this.value">
    <option link="test.html" value="selectedimage.png">Text</option>
    <option>Another option</option>
</select>
<a id="pagelink"></a>
<img id="image" src="temp.png"/>

正文
另一种选择

正如您所看到的，主要问题是“链接”是一个完全虚构的东西，不起作用，因此链接总是默认为“未定义”。不幸的是，我不能有两个“值”，使用“标签”也不起作用

你可能会说我对JavaScript真的不太了解。我是否可以使用“值”的替代方法，或定义新的类似元素的方法？
尝试以下方法：

使用
数据链接
而不仅仅是
链接
，使用
数据-
是一种惯例。您可以使用来检索数据链接中的信息

HTML

演示
我还删除了您的内联代码，并为select提供了一个id
#selector
。这样你可以在正确的地方有JavaScript而不在HTML的中间。
 
试试这个：
使用
数据链接
而不仅仅是
链接
，使用
数据-
是一种惯例。您可以使用来检索数据链接中的信息

HTML

演示
我还删除了您的内联代码，并为select提供了一个id
#selector
。这样你就可以在正确的地方拥有JavaScript而不在HTML中间。


我将离开hereDo您要始终使用值集作为选择列表中所选选项的值属性吗？您应该使用数据属性，而不是使html无效我将离开hereDo您要始终使用值集作为选择列表中所选选项的值属性吗？您应该使用数据属性和不使您的html无效+1 html 5支持自定义数据属性，只要它们以数据开头：）比常规更清楚，
data-*
是有效属性
link
不是。@Chad，true。试图解释为什么它听起来像是可选的。我更正了。+1 HTML 5支持自定义数据属性，只要它们以数据开头：）比常规更清楚，
data-*
是有效属性
link
不是。@Chad，true。试图解释为什么它听起来像是可选的。我已更正。+1在使用数据-*属性之前我已多次使用的有效选项。+1在使用数据-*属性之前我已多次使用的有效选项。
<select id="selector">
    <option data-link="test.html" value="selectedimage.png">Text</option>
    <option data-link="test2.html" value="selectedimage2.png">Text2</option>
</select>

document.getElementById('selector').onchange = function () {
    document.getElementById('pagelink').href = this.options[this.selectedIndex].getAttribute('data-link');
    document.getElementById('image').src = this.value
}

<select id="select">
   <option value="link1,scr1">Text 1</option>
   <option value="link2,scr2">Text 2</option>
</select>
  <br>
<a id="pagelink" href="#">link</a>
<img id="image" src="temp.png"/>

var d = document,
    $sel = d.getElementById('select'),
    $plk = d.getElementById('pagelink'),
    $img = d.getElementById('image');

$sel.onchange = function(){
  var val = this.value.split(',');
  alert(val[0]+' '+val[1]);
  // $plk.href = val[0];
  // $img.src  = val[1];
};