0

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

<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 真的不太了解。有没有我可以使用的“价值”的替代品，或者有一种方法来定义一个新的、类似的元素？

4

2 回答 2

3

尝试这个：

使用data-link而不仅仅是使用link，它是使用的约定data-。您可以使用.getAttribute()来检索 .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
}

演示在这里

我还删除了您的内联代码并为选择提供了一个 ID #selector。像这样，您可以在正确的位置而不是在 html 中间放置 javascript。

于 2013-10-08T20:23:34.097 回答
1

演示

<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];
};
于 2013-10-08T20:30:39.850 回答