Как изменить изображение с помощью выпадающего списка?

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> 

Как я выполнить это?

Спасибо.

Edit:

с предложением заостренный, он работает.

<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' /> 

Edit:

Существует проблема, что если я обновить страницу, по умолчанию изображение будет отображаться, но выбор в раскрывающемся списке останется. Как это исправить?

Answer 1

Вы можете использовать «класс» каждого параметра, чтобы удерживать индикатор того изображения. Если вы пишете в HTML5, как и все красивые люди в наше время, вы можете использовать «данные» атрибут:

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

Вы можете фактически придерживаться любого атрибута вы хотите на тегах, но это будет оставить страницы в недействительном состоянии. Атрибуты HTML5 еще не проверены (я не думаю, что последний проверщик HTML5, который я пробовал, был довольно изворотливым), но W3C обещает, что они когда-нибудь появятся.

редактировать — также - ваш вопрос указывает, что вы хотите изменить изображения, когда кто-то «щелкает» на <select>. Фактически вы можете получать «щелчки» из каждого <option>, но вам, вероятно, также следует следить за событиями «изменения». Пользователи могут вставлять в ваш <select> и использовать клавиши со стрелками вверх и вниз для изменения выбора. Вы не получите событие «change», пока пользователь не выберет <select> или не щелкнет где-нибудь еще. (Это можно было бы получить «» события нажатия клавиш, я не пробовал это, но я только мог бы ...)

редактировать — Чтобы получить атрибуты (если вы используете «DATA-» трюк), вы должны использовать метод «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>