當選擇複選框時需要圖像更改

Question

我有一個表單，要求用戶從淹沒框中進行選擇，當他們進行選擇時，頁面頂部的徽標將更改爲與其選擇相匹配。 這裏是jsfiddle。 所以我的問題是這樣的，我想能夠在下拉框中將選擇的名稱發佈到mysql，但是作爲值已被javascript用來更改圖像中所有帖子在數據庫中的是圖像的名稱而不是框中的值。

我想要做的是不使用下拉框來改變圖像，我怎樣才能使用複選框來完成同樣的事情？我有一個默認的標識，一直顯示在表單上，​​直到做出選擇，所以我需要保留這個標識。

這裏是在的jsfiddle

<br/><br/> 

<select id="dd" onChange="swapImage()" style="width: 150px"> 
<option value=""></option> 
<option value="http://xxxs.com/demo1/decals/falcons2013.jpg">Falcons</option> 
<option value="http://xxxxx.com/demo1/decals/gvklogo2013.png">Green Valley Knights</option> 
<option value="http://xxxxx.com/demo1/decals/longhorns2013.jpg">Longhorns</option> 
</body> 
</html> 

代碼和JavaScript

function swapImage(){ 
var image = document.getElementById("logoimage"); 
var dropd = document.getElementById("dd"); 
image.src = dropd.value;  
}; 

Answer 1

我認爲使用複選框會有點更具挑戰性的，除非你讓他們像一個無線電工作組。如果你想保留的選擇，你可以把IMG SRC在title，讓您使用的價值 -

<select id="dd" onChange="swapImage()" style="width: 150px"> 
    <option value=""></option> 
    <option value="Falcons" title="http://xxxxx.com/demo1/decals/falcons2013.jpg" >Falcons</option> 
    <option value="Green Valley Knights" title="http://xxxxx.com/demo1/decals/gvklogo2013.png">Green Valley Knights</option> 
    <option value="Longhorns" title="http://xxxxx.com/demo1/decals/longhorns2013.jpg">Longhorns</option> 
</select> 

在你的js

然後，讓所選擇的選項標題 -

function swapImage(){ 
var image = document.getElementById("logoimage"); 
var dropd = document.getElementById("dd"); 
image.src = dropd.options[dropd.selectedIndex].title; 
}; 

看到這個更新的jsfiddle例子 - http://jsfiddle.net/UtcTc/

編輯
如果你想保存選定IMG SRC，我會建議創建一個隱藏的ê字元素略低於選擇

<input type="hidden" name="img_url" id="img_url" /> 

然後改變你的swapImage()到

function swapImage(){ 
    var image = document.getElementById("logoimage"); 
    var dropd = document.getElementById("dd"); 
    image.src = dropd.options[dropd.selectedIndex].title; 
    document.getElementById("img_url").value = dropd.options[dropd.selectedIndex].title;  
}; 

，然後可以在表格後捕獲 -

$img_url = $_POST['img_url']