Question

这是我的代码：

<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&nbsp;↓</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>

根据下拉选择显示图像。到目前为止，这非常有效。我的目标是还为该图像添加特定的超链接。

当用户选择＆＃34; First＆＃34;将显示名为1.jpeg的图像。这就像一个缩略图。当用户点击此图像时，将打开一个新的窗口/标签（target =＆＃34; _blank＆＃34;），并显示一个名为eg的图像。 1_big.jpeg。

有人知道怎么做吗？

Answer 1

您好，这是一个有效的例子，希望对您有所帮助

<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&nbsp;↓</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>

Answer 2

给锚标记一个id：

<a href="" target="_blank" id="image_link"><img id="order_form_image" src=""></a>

然后你可以在图像改变时在href中进行jQuery：

function showFormatImage() {
    $("#order_form_image").attr('src', $('select[name=select_name] option:selected').attr('data-img'));
    $('#image_link').attr('href', $('select[name=select_name] option:selected').attr('data-img'));
    $('#img_src').html($("#order_form_image").attr('src'));
    return false;
}

jQuery：根据下拉选择更改图像时添加图像超链接

2 个答案: