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

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, как все красивые люди в наше время, вы можете использовать атрибут «data»:

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

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

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

изменить & mdash; Чтобы получить атрибуты (если вы используете трюк "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

Вы можете поместить несколько значений в поле 'value', разделяя их разделителями. Вам придется разделить значение и выбрать тот, который вы хотите использовать при отображении вашего изображения

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