Я хочу использовать раскрывающийся список, каждый раз, когда я нажимаю на него содержимое, появляются разные картинки. Но я не хочу использовать свойство «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' />
Редактировать:
Существует проблема, то есть, если я обновляю страницу, по умолчанию будет отображаться изображение, но выбор в выпадающем списке останется. Как это исправить?
Вы можете использовать «класс» каждого параметра, чтобы удерживать индикатор того, какое изображение должно отображаться. Если вы пишете HTML5, как и все красивые люди, вы можете использовать атрибут «data»:
<option value='1' data-whichPicture='http://whatever.com/picture_017.jpg'>1</option>
Фактически вы можете использовать любой атрибут в своих тегах, но он оставит страницу в недействительном состоянии. Атрибуты HTML5 еще не проверены (я не думаю, что последний проверщик HTML5, который я пробовал, был довольно изворотливым), но W3C обещает, что они когда-нибудь появятся.
edit – также – в вашем вопросе упоминается, что вы хотите изменить фотографии, когда кто-то «нажимает» на <select> . Фактически вы можете получать события «щелчка» из каждого <option> , но вы, вероятно, также должны следить за событиями «изменения». Пользователи могут войти в ваш <select> и использовать клавиши со стрелками вверх и вниз для изменения выбора. Вы не получите событие «change», пока пользователь не <select> из <select> или не щелкнет где-нибудь еще. (Возможно, можно получить «нажатия клавиш», я не пробовал это, но я мог бы …)
edit – Чтобы получить атрибуты (если вы используете трюк «data-»), вы должны использовать метод getAttribute для элементов:
var whichPicture = sel.options[sel.selectedIndex].getAttribute('data-whichPicture');
Вы можете настроить карту между значениями параметров и изображениями
{ 1: "imgA.png", 2: "imgB.png" }
а затем использовать функцию для загрузки правильного изображения на основе этого сопоставления.
Другой подход может заключаться в увеличении значения с именем изображения, например,
<select name='test'> <option value='1;imgA.png'>1</option> <option value='2;imgB.png'>2</option> </select>
А затем используйте строковые функции для синтаксического анализа числа или имени изображения.
Вы можете поместить несколько значений в поле «значение», разделив их на разделители. Вам нужно будет разделить значение и выбрать тот, который вы хотите использовать при отображении изображения
<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>