javascript - 在 Div 标签中使用选择列表加载图像

Question

我想用选择列表加载div标签中的图片，当我点击图片1时，图片1加载。当我点击图片 2 时，图片 2 加载...并且，例如，当图片 1 加载时，当按下下一步按钮图片 2 加载时...我尝试了很多方法但我失败了。

<select id="mypicture" class="dropdown">
<option value="">Choose picture...</option>
<option value="1">Picture 1</option>
<option value="2">Picture 2</option>
<option value="3">Picture 3</option>
<option value="4">Picture 4</option>          
       </select>

这是我的 code

Answer 1

您的代码中缺少实际的图像显示。

您需要做的是，在您重新配置更改事件处理程序中的所有按钮之后，您需要显示一个图像。

$('div').html('<img src="'+imgUrl+'">');

并且您需要根据选择的值设置 imgUrl，或者在选项元素上设置 url，以便您可以像这样检索它:

<option value="1" data-imgurl="imgs/img1.jpg">

我已经用另一个解决方案更新了你的 fiddle http://jsfiddle.net/Wdw4z/1/