Question

我正在做一个广告表单，下面有预览广告。

因此，当用户输入广告时，预览会随着时间的推移而更新。其中一个选项是下拉框，他们可以选择他们的服务类型..

我有一个主div，用于预览。我想根据广告形式的选择选择在该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>

所以div“showImage”是我想根据用户在表单的选择下拉列表中选择的选项启动的。

所以：如果value =“1”则显示pest.png 如果value =“2”则显示build.png 等等。

有一种简单的方法吗？我想showImage div必须预先设置为display：none

但在那之后我感到难过。

更新

基于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;

}

Answer 1

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

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

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

Answer 2

这是一个原型:(未经测试）

$('#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>');
});

根据选择框选择显示图像

2 个答案: