根据选择下拉图片和文本 [英] Dropdown Picture and Text based on selection

问题描述

你怎么能让下面的内容完全像它一样工作，但也为每个不同的选择更改图片，例如如果您选择140mm x 300mm，则选择1张图片;如果选择140mm x 400mm，则选择不同的图片，如果选择140mm x 500mm，则选择不同的图片？非常感谢提前。

Hi, how would you get the below to work exactly as it does but to also change a picture for each different selection e.g. 1 picture if you select 140mm x 300mm, a different picture if you select 140mm x 400mm and a different picture again if you select 140mm x 500mm? many thanks in advance.

<script language="JavaScript">

var DivTxt = new Array()
DivTxt[0] = "Please Select a Size to Show Price"
DivTxt[1] = "£10.00"
DivTxt[2] = "£11.00"
DivTxt[3] = "£12.00"
DivTxt[4] = "£13.00"
DivTxt[5] = "£14.00"
DivTxt[6] = "£15.00"
DivTxt[7] = "£16.00"
DivTxt[8] = "£17.00"
DivTxt[9] = "£18.00"
DivTxt[10] = "£19.00"
DivTxt[11] = "£20.00"
DivTxt[12] = "£21.00"
DivTxt[13] = "£22.00"
DivTxt[14] = "£23.00"
DivTxt[15] = "£24.00"
DivTxt[15] = "£25.00"

function getText(slction){
txtSelected = slction.selectedIndex;
document.getElementById('textDiv').innerHTML = DivTxt[txtSelected];
}
&lt;/script>


&lt;Select class="body_text" name="critical" >

推荐答案

我倾向于在< option> 标签上添加额外数据 data - 属性。这样，您就可以将数据保存在一起，并且在列表更改时您不会忘记更新数组。

I'd be inclined to add the extra data as data- attributes on the <option> tags. That way, you keep the data together, and you won't forget to update the array when the list changes.

<select id="theList">
    <option value="" data-price="Please Select a Size to Show Price" data-image="http://placehold.it/150x150">--Select One--</option>
    <option value="1" data-price="£10" data-image="http://placehold.it/350x150">Item 1</option>
    <option value="2" data-price="£20" data-image="http://placehold.it/150x350">Item 2</option>
</select>

<p>Price: <span id="priceText"></span></p>
<p>Image: <img id="theImage" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" /></p>

<script>
var updateSelectedDetails = function(){
    var opt =

（ ＃theList）。find（ option：selected）;

("#theList").find("option:selected");

（ ＃priceText）。text（opt。 data（ price））;

("#priceText").text(opt.data("price"));

这篇关于根据选择下拉图片和文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！