2017-10-16 90 views
0

我有選擇菜單。每個選項都會切換顯示的圖像。我在問如何將每個選項的每個唯一寬度和高度翻譯成實際顯示的圖像。據我所知,寬度和高度是沒有根據的,只要它們對選項標籤有影響,但我想我的意思是我想要一個與每個選項相關聯的值並綁定到每個選項上,並在選項附加時影響圖像被選中。像添加一個變量,如 var c = a.getElementByTagName('class')。getAttributeNode('width')。value; ??附加值選項,如寬度和高度

我真的不知道。我如何將值與選項相關聯?最好有一種方法,不需要爲每個選項附加新的課程。我的代碼到目前爲止只能改變src。

我希望你能理解這個問題。我盡我所能解釋它。謝謝你的幫助。

<!DOCTYPE html> 
<html> 
<body> 

<select id='select1'> 
    <option value='pic_unavail' selected width='300' height='300'>-- Choose --</option> 
    <outgroup label="Animals"> 
    <option value='pic_monkey' id='monkey' width='50' height='100'>Monkey</option> 
    <option value="pic_cat" id='cat' width='100' height='200'>Cat</option> 
    <option value="pic_dog" id='dog' width='200' height='250'>Dog</option> 
    </outgroup> 
</select> 

<img id="pic"> 

<script type="text/javascript"> 

document.getElementById("select1").onchange = select; 

var a = document.getElementById('select1')  
var b = document.getElementById('pic'); 


function select() { 
    b.src = this.value; 
    return 
}  

</script> 
</body> 
</html> 

回答

1

用途:

this.options[this.selectedIndex].getAttribute('width'); 
this.options[this.selectedIndex].getAttribute('height'); 

這應該給你所選擇的選項的寬度和高度,就像你現在讓他們嵌入在每個標籤。希望這可以幫助!