基於選擇框選擇的顯示圖像

我正在做一個廣告形式，下面的預覽廣告。基於選擇框選擇的顯示圖像

因此，當用戶輸入他們的廣告時，預覽會隨之更新。其中一個選擇是下拉框，在那裏他們可以選擇他們的服務類型..

我有一個主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

基於選擇框選擇的顯示圖像

回答

相關問題