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

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

image select

Image 将值附加到宽度和高度等选项,image,select,attributes,option,Image,Select,Attributes,Option,我有选择菜单。每个选项都会切换显示的图像。我想问的是，如何将链接到每个选项的每个唯一宽度和高度转换到实际显示的图像上。我理解宽度和高度对选项标签的影响是毫无根据的，但我想我说的是，我想要一个与每个选项关联和绑定的值，这些值在选择选项时生效并影响图像。比如添加一个变量，比如 var c=a.getElementByTagName（'class'）.getAttributeNode（'width'）.value 我真的不知道。如何将值与选项关联？最好有一种方法不必为每个选项附加新类。到目前为止，我的

我有选择菜单。每个选项都会切换显示的图像。我想问的是，如何将链接到每个选项的每个唯一宽度和高度转换到实际显示的图像上。我理解宽度和高度对选项标签的影响是毫无根据的，但我想我说的是，我想要一个与每个选项关联和绑定的值，这些值在选择选项时生效并影响图像。比如添加一个变量，比如 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>


--选择--
猴子
猫
狗

使用：

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

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