Question

当用户在<option>元素中选择<select>时，我正在尝试更改2件事，链接和图片。

<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"/>

我从this answer.

改编了这项技巧

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

你可能会说我真的不太了解JavaScript。我可以使用“价值”的替代品，还是定义新的类似元素的方法？

Answer 1

试试这个：

使用data-link而不是link，这是使用data-的约定。您可以使用.getAttribute()检索data-link内的信息。

HTML

<select id="selector">
    <option data-link="test.html" value="selectedimage.png">Text</option>
    <option data-link="test2.html" value="selectedimage2.png">Text2</option>
</select>

的Javascript

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

演示here

我还删除了您的内联代码，并为select提供了一个ID #selector。像这样你可以在正确的地方使用javascript，而不是在html的中间。

Answer 2

Demo

<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];
};

选择更改图像和链接

2 个答案:

演示here