dropped.value가 삭제되었습니다 .id가 있습니까?

image.src에 각 <option>의 값이 아닌 id를 표시하고 싶습니다. 방울 떨어 졌어 .ID는 존재하니? 이 작업을 수행 할 수 있습니까? 또는 ID가 <select>에 잠겨 있습니까? 사용자가 제출을 명중 할 때, 나는 모양에있는 가치를 통과 할 필요가있다.dropped.value가 삭제되었습니다 .id가 있습니까?

<script type="text/javascript"> 
function swapImage(){ 
     var image = document.getElementById("imageToSwap"); 
     var dropped = document.getElementById("changethisimage"); 
     image.src = "http://foo.com/images/"+dropped.value; 
}; 
</script> 
<img id="imageToSwap" src="http://foo.com/images/SHOP_Car Emblem.jpg" width="150" align=right> 
<select name="os0" id="changethisimage" onChange="swapImage()"> 
<option value="Light Blue" id="SHOP_Car Emblem_Cyan.jpg" selected>Light Blue 
<option value="Dark Blue" id="SHOP_Car Emblem_DkBlue.jpg">Dark Blue 
<option value="Canadian Red" id="SHOP_Car Emblem_Red.jpg">Canadian Red 
<option value="Irish Green" id="SHOP_Car Emblem_IrishGreen.jpg">Irish Green 
</select>

출처

2011-10-31 JTJohnston

또한 id 값에 공백이 없어야합니다. – jfriend00

Google에서 html 데이터 속성을 사용하는 경우 id를 URL로 전달하는 것보다 바람직합니다. – Andre

그러나 나쁜 될 수있다

image.src = "url" + dropped.selectedOptions[0].id

브라우저 지원을보십시오. 따라서 이것을 원할 수도 있습니다.

var selected = dropped.selectedIndex; 
image.src= "url" + dropped.options[selected].id

자세한 내용은 Select 인터페이스를 참조하십시오. 사이드 참고로

, 나는 onChange="code" 비트가 정말 나쁜, 나쁜 당신의

<select name="os0" id="changethisimage" onChange="swapImage()">

일을 참조하십시오. 인라인 이벤트 처리기입니다. 즉, HTML에 JavaScript 코드가 있음을 의미합니다. 이것은 완전히 우려의 분리에 반대하고 스파게티 코드 지옥으로 연결됩니다.

당신은 완전히 시도

document.getElementById("changethisimage").addEventListener("change", swapImage);

출처

2011-10-31 18:24:24 Raynos

왜'onchange'는''나쁘다, 정말 나쁘다 ''? – Neal

@ 좋은 지적, 나는 우려의 모든 분리를 설명했다. – Raynos

@ Raynos 나는 동의한다. 그렇다면 OP가 최적화를 요구하지 않는다면 관련성이 없을 수도있다. – david

로 교체해야이 :

JS :

function swapImage(selectObj){ 
     var image = document.getElementById("imageToSwap"); 
     var options = selectObj.options; 
     var sIndex = selectObj.selectedIndex; 
     image.src = "http://foo.com/images/"+options[sIndex].id; 
};

HTML : <select name="os0" id="changethisimage" onChange="swapImage(this)">

출처

2011-10-31 18:25:31 Neal

-1. – Raynos

@Raynos omfg ... 나는 단지 영업 코드를 사용하고 있습니다 ... – Neal

사실 ..하지만 고쳐야합니다! – Raynos

이것은 내가 어떻게 할 것입니다 :

HTML :

<select id="select_kitten"> 
    <option value="Kitten 1" data-src="210/200/" selected>Kitten 1</option> 
    <option value="Kitten 2" data-src="220/210/">Kitten 2</option> 
    <option value="Kitten 3" data-src="200/180/">Kitten 3</option> 
    <option value="Kitten 4" data-src="225/220/">Kitten 4</option> 
</select> 

<img id="kitten_img">

자바 스크립트 :

var img = document.getElementById('kitten_img'), 
    select = document.getElementById('select_kitten'); 

function onchange() { 
    img.style.opacity = 0.2; 
    img.src = 'http://placekitten.com/' + select.options[ select.selectedIndex ].dataset.src; 
} 

img.onload = function() { 
    this.style.opacity = 1; 
}; 

select.onchange = onchange; 
onchange();

라이브 데모 :http://jsfiddle.net/XmhU9/4/

dataset는하지만 IE에서 구현되지 않습니다. IE에 대한 지원이 필요한 경우 크로스 브라우저 라이브러리를 고려하십시오.

출처

2011-10-31 19:20:05

dropped.value가 삭제되었습니다 .id가 있습니까?

답변

관련 문제