드롭 다운 목록을 사용하여 사진을 변경하는 방법은 무엇입니까?

Question

드롭 다운 목록을 사용하고 싶습니다. 콘텐츠를 클릭 할 때마다 다른 그림이 표시됩니다. 하지만 다른 값을 사용하고 싶기 때문에 'value'속성을 사용하고 싶지 않습니다.

예 : 그 작업을 수행하려면 어떻게

<select name='test'> 
<option value='1'>1</option> 
<option value='2'>2</option> 
<option value='3'>3</option> 
<option value='4'>4</option> 
</select> 

?

감사합니다.

편집 : 뾰족한의 제안에

, 그것은 작동합니다.

<select name="dpt" onChange="picture.src=this.options[this.selectedIndex].getAttribute('data-whichPicture');" > 
<option value="1839" data-whichPicture='./imgs/t1.jpg' >01</option> 
<option value="1661" data-whichPicture='./imgs/t2.png' >02</option> 
</select> 
</select> 
<img src='' id='picture' /> 

편집 : 문제가 있습니다

, 즉 내가 페이지를 새로 고침하는 경우, 기본은 그림이 표시됩니다 만 드롭 다운 목록에서 선택이 남아있을 것입니다. 그것을 고치는 방법?

Answer 1

각 옵션의 "클래스"를 사용하여 어떤 이미지를 표시할지 표시 할 수 있습니다. 당신이 요즘 아름다운 사람들의 모든처럼 HTML5로 작성하는 경우, 당신은 "데이터"속성을 사용할 수 있습니다

<option value='1' data-whichPicture='http://whatever.com/picture_017.jpg'>1</option> 

당신은 실제로 어떤 당신이 태그에 원하는 속성 스틱 수 있지만 떠날거야 페이지를 유효하지 않은 상태로 만듭니다. HTML5 속성은 아직 유효하지 않습니다 (생각하지는 않습니다, 마지막으로 시도한 HTML5 유효성 검사기는 상당히 위험합니다). 그러나 W3C는 언젠가는 될 것이라고 약속합니다.

편집 —는 - 귀하의 질문은 당신이 누군가가 <select>의 "클릭"하면 사진을 변경할 것을 언급하고있다. 실제로 각 <option>에서 "클릭"이벤트를 얻을 수 있지만 "변경"이벤트를 감시해야합니다. 사용자는 <select>을 탭하고 위쪽 및 아래쪽 화살표 키를 사용하여 선택 사항을 변경할 수 있습니다. 사용자가 <select>에서 탭하거나 다른 곳을 클릭 할 때까지는 '변경'이벤트가 발생하지 않습니다. (그것은 "키 누름"이벤트를 얻을 수있을, 나는 그것을 시도하지 않은하지만 난 그냥 수도 ...) (당신이 "데이터 -"트릭을 사용하는 경우)

편집 —이 속성을 얻으려면, 당신은 요소의 "getAttribute를"방법을 사용해야합니다 :

var whichPicture = sel.options[sel.selectedIndex].getAttribute('data-whichPicture'); 

Answer 2

당신은 올바른 이미지를로드하는 옵션 값과 이미지

{ 1: "imgA.png", 2: "imgB.png" } 

다음 기능을 사용 사이의 맵을 설정할 수 있습니다 이 매핑을 기반으로

또 다른 방법은, 다음과 같이 이미지 이름으로

<select name='test'> 
<option value='1;imgA.png'>1</option> 
<option value='2;imgB.png'>2</option> 
</select> 

을 값을 증가 그리고 필요에 따라 숫자 값 또는 이미지 이름을 구문 분석 할 문자열 함수를 사용하는 수 있습니다.

Answer 3

구분 기호로 구분하여 '값'입력란에 여러 값을 입력 할 수 있습니다. 당신은 값을 분할하고 이미지

<option value="1,dogs.jpg">1</option> 
<option value="2,hogs.jpg">2</option> 
<option value="3,cats.jpg">3</option> 
<option value="4,dogs.jpg">4</option>