動態自動選擇，改變其他地方的圖片

這只是我想到的一個世俗輸入字段的爵士樂。動態自動選擇，改變其他地方的圖片

好了，所以我們有一個input元素，我們有ID，名稱和圖像名稱

預繁殖小db表原來這就是我的想法。

我們有一個輸入元素，用戶開始輸入。比方說APPL ...

降下來（活自動提示彈起）與APPLE，他們選擇蘋果和頁面上的其他地方的另一個div元素中，一個圖像顯示的div apple.png

同樣，如果他們選擇香蕉，同樣banana.png在該div中顯示。

好的，我們現在得到了什麼。

那麼我有自動建議（實時搜索自動完成）所有罰款和丹迪。

我有輸入元素工作，他們可以選擇，因爲他們從建議中鍵入。

我無法弄清楚的是，如何使用（可能ajax我想）嗯..或其他方法，在別處顯示圖像的方式，這反映了他們的選擇。

讓事情變得更簡單。

全部自動完成是完全一樣的圖像文件名，所以：

APPLE變得apple.png 蛋糕變得cake.php

我相信JS可以幫助在這裏。只是不知道如何。我會想到getElementById

Anyhoo ..有時候，問一個問題可能會調用一個做出類似事情的人的迴應。

無法顯示代碼，因爲我想創建的元素不存在。

但是爲了簡單起見，讓我們來選擇框方法：

<select id="fruit" name="fruit"> 
           <option value="">Please select a Fruit</option> 
           <option value="apple">Apple</option> 
           <option value="cake">Cake</option> 
          </select>

目前的自動建議，自動完成看起來是這樣的：

<div class="field"><label for="fruit">Pick a Fruit </label>

任何幫助讚賞...

來源

2010-12-03 422

您可以用jQuery做到這一點很容易。複製下面的代碼示例並將其粘貼到html文件的主體標記之間。用你自己的替換「myselector」元素的選項值。當您從下拉菜單中選擇一個項目時，圖像會動態更改。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 

<script type="text/javascript" language="javascript"> 
$(function() { 
    $("#myselector").change(function() { // Assign a handler. 
     if ($("#myselector").val() != '') { 
      $("#myimage").attr('src', $("#myselector").val()); // Change the image. 
     } 
    }); 
}); 
</script> 

<select name="myselector" id="myselector"> 
    <option value="">Select Image</option> 
    <option value="http://www.gravatar.com/avatar/e2f0c2f013205c397a7b00bc3012a027?s=32&d=identicon&r=PG">Image 1</option> 
    <option value="http://www.gravatar.com/avatar/06383b51463f855d7cc0f07d4566bd42?s=32&d=identicon&r=PG">Image 2</option> 
</select> 

<img name="myimage" id="myimage" src="http://www.gravatar.com/avatar/c259fe3371bba238ad95021e67741e9c?s=32&d=identicon&r=PG" />

來源

2010-12-03 03:43:23

現在將嘗試這個瑞安。那只是血腥的男人。這是基於一個監聽器，還可以輸入到輸入字段嗎？ – 422 2010-12-03 03:46:31

您的網頁上添加圖片：

<img src="default.jpg" id="result_image" />

當你的代碼自動完成在文本填充，改變形象，以及

document.getElementById('result_image').src = autocompleted_text + ".jpg";

來源

2010-12-03 02:26:25

哈哈酷，會給一個去。歡呼隊友 – 422 2010-12-03 02:30:44

動態自動選擇，改變其他地方的圖片

回答

相關問題