这是我的代码:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.pack.js"></script>
</head>
<body>
<select id="my_select" name="select_name" class="order_form_select">
<option data-img="" value="" disabled selected>Please select ↓</option>
<option data-img="1.jpeg" value="first">First</option>
<option data-img="2.jpeg" value="second">Second</option>
<option data-img="3.jpeg" value="third">Third</option>
</select>
<a href=""><img id="order_form_image" src=""></a>
<script>
document.getElementById("my_select").onchange = showFormatImage;
function showFormatImage() {
$("#order_form_image").attr('src', $('select[name=select_name] option:selected').attr('data-img'));
$('#img_src').html($("#order_form_image").attr('src'));
return false;
}
</script>
</body>
</html>
根据下拉菜单选择显示图像。到目前为止效果很好。我的目标是还向该图像添加特定的超链接。
当用户选择“首先”时，将显示名为 1.jpeg 的图像。这就像一个缩略图。当用户单击此图像时，将打开一个新窗口/选项卡(target =“_blank”)并显示名为例如的图像1_big.jpeg。
有人知道怎么做吗？
最佳答案
您好，这是一个工作示例，希望对您有所帮助
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.pack.js"></script>
</head>
<body>
<select id="my_select" name="select_name" class="order_form_select">
<option data-img="" value="" disabled selected>Please select ↓</option>
<option data-img="1.jpeg" value="first">First</option>
<option data-img="2.jpeg" value="second">Second</option>
<option data-img="3.jpeg" value="third">Third</option>
</select>
<a id="link" target="_blank" href=""><img id="order_form_image" src=""></a>
<script>
document.getElementById("my_select").onchange = showFormatImage;
function showFormatImage() {
$("#order_form_image").attr('src', $('select[name=select_name] option:selected').attr('data-img'));
$('#img_src').html($("#order_form_image").attr('src'));
$('#link').attr('href','big_'+$('select[name=select_name] option:selected').attr('data-img'));
return false;
}
</script>
</body>
</html>关于javascript - jQuery:根据下拉选择更改图像时添加到图像的超链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40147495/