基于选择框选择的显示图像

我正在做一个广告形式，下面的预览广告。基于选择框选择的显示图像

因此，当用户输入他们的广告时，预览会随之更新。其中一个选择是下拉框，在那里他们可以选择他们的服务类型..

我有一个主div，预览。我想在该分区的基础上，选择选择从广告形式的一个角落里添加图像...

因此，在下拉菜单中选择，我们有：

<select style="width: 220px; display: none;" id="speedB" name="category"> 
    <option value=""<?if ($category == ""){?> selected="selected"<?}?>>Please Select</option> 
    <option value="1"<?if ($category == "1"){?> selected="selected"<?}?>>Pest Inspectors</option> 
    <option value="3"<?if ($category == "3"){?> selected="selected"<?}?>>Building Inspectors</option> 
    <option value="2"<?if ($category == "2"){?> selected="selected"<?}?>>Removalists</option> 
    <option value="5"<?if ($category == "5"){?> selected="selected"<?}?>>Conveyancing</option> 
    <option value="4"<?if ($category == "4"){?> selected="selected"<?}?>>Pool Inspectors</option> 
</select>

并在预览DIV我有：

<div class="dirResult"> 
<div class="showImage"></div> 
</div>

所以格“showImage”是我想根据选择用户在表单中选择下拉菜单选择了启动什么。

这样：如果值= “1”，则表明pest.png 如果值= “2” 然后显示等等等等build.png 。

有没有简单的方法来做到这一点？我想showImage div必须预先设置显示：无

但之后，我难倒了。

UPDATE

根据ingenu的回答如下。

我想也许添加不同的div类，而不是单独的PNG图像，这样我可以控制的CSS等

因此，像：

$('#speedB').change(function() { 
         var myimages = { 
         '': '.nothing', 
         '1': '.pest', 
         '2': '.build' 
         } 
         var selectedImage = myimages[$(this).val()]; 
         $('#topright').html('not sure what to put here');});

然后在CSS中有：

.pest { 
background: url("pest.png") no-repeat scroll 0 0 transparent; 
height: 70px; 
position: absolute; 
right: 0; 
top: 0; 
width: 70px;

}

来源

2011-10-23 422

这里有一个原型：（未经测试）

$('#speedB').change(function() { 
    var myimages = { 
    '': 'default.png', 
    '1': 'pest.png', 
    '2': 'build.png' 
    } 
    var selectedImage = myimages[$(this).val()]; 
    $('.showImage').html('<img src="'+selectedImage+'" alt="" />'); 
});

编辑：插入容器，而不是图片：

$('#speedB').change(function() { 
    var myclasses = { 
    '': 'default', 
    '1': 'pest', 
    '2': 'build' 
    } 
    var selectedClass = myclasses[$(this).val()]; 
    $('.showImage').html('<div class="'+selectedClass+'"></div>'); 
});

来源

2011-10-23 21:55:51 Candide

将使showImage更有意义一个ID和var myimages单独的图像类，而不是实际的图像，我喜欢这种方法 – 422

有根据你的回复更新了问题，你能否协助 – 422

@ 422我更新了答案。基本上，你可以注入你想要的选择更改的任何代码。一般的做法是保留一个散列/字典，将选项中的值映射到要在结果中注入的代码。 – Candide

$(document).ready(function(){ 
    $('#speedB').change(function(){ 
     $('.showImage').html('<img src="$(this).val();" />'); 
    }); 
});

以下代码将知道“speedB”的ID元素何时发生更改，并将用图像替换类“showImage”的HTML内容，并且该图像的源将从所选项目的值落下。因此，对于Pest Inspectors，将该选项的值更改为“pest.png”。

请确保您在上面的脚本之前也包含jQuery库。您可以在www.jquery.com上找到该代码。

来源

2011-10-23 21:55:06 wwwroth

你忘了来连接选定的值。 – karim79

已更新的问题，也许这是一个更光滑的解决方案，不知道如何调用css tho – 422

基于选择框选择的显示图像

回答

相关问题