2017-10-16 6 views
0

私は選択メニューを持っています。各オプションは表示される画像を切り替えます。私はどのように私は実際の表示画像に各オプションにリンクされているそれぞれのユニークな幅と高さを翻訳する必要があります質問しています。私は幅と高さがオプションタグに影響を及ぼしている限りは根拠がないと理解していますが、Imの言い回しは、値が関連付けられ、再生される各オプションに結合され、 toが選択されます。何かのような変数を追加するようなもの 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'); 

これはちょうどあなたが現在彼らはそれぞれのタグに埋め込まれているとして、あなたに選択したオプションの幅と高さを与える必要があります。お役に立てれば!

関連する問題