将值附加到宽度和高度等选项

Question

我有 Select 菜单。每个选项都会切换显示的图像。我在问如何将链接到每个选项的每个唯一宽度和高度转换到实际显示的图像上。我知道宽度和高度就它们对选项标签的影响而言是毫无根据的，但我想我说的是我想要一个与每个选项相关联并绑定的值，这些值会起作用并在附加选项时影响图像到被选中。像添加变量之类的东西 var c = a.getElementByTagName('class').getAttributeNode('width').value;??

我真的不知道。如何将值与选项相关联？最好有一种方法可以不在每个选项上附加一个新的 class。到目前为止我的代码只能更改 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>

Answer 1

使用：

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

这应该会为您提供所选选项的宽度和高度，就像您当前将它们嵌入每个标签中一样。希望这对您有所帮助！

将值附加到宽度和高度等选项

Attaching values to Options like Width and Height

image

select

attributes

option