2014-09-28 2 views
0

Как я могу использовать выбранный элемент со списком в качестве переменной для использования вызова изображения в JavaScript?Вызвать значение поля со списком в JavaScript

HTML

<select id="fileType"> 
<option value=".jpg">.JPG</option> 
<option value=".png">.PNG</option> 
<option value=".gif">.GIF</option> 
</select> 

JavaScript

var selectedComb = document.getElementById("fileType"); 
var selectedFileType = selectedComb.options[selectedComb.selectedIndex]; 
var selectedType = selectedFileType.value; 

document.write('<img src="example.com/images/pic + 'selectedType'"/>'); 

Теперь, очевидно, это не работает. Как я могу заставить его работать? Его действительно просто строка document.write, которая должна быть исправлена.

+1

выпадающим является контролем пользовательского интерфейса, который представляет собой комбинацию (отсюда и название) из выпадающего меню (которое вы получаете с избранным в HTML) и вводом текста (ввод введите текст). HTML не имеет встроенных элементов управления, которые представлены в виде combobox. Если у вас есть, то он построен с кучей JavaScript и ответ зависит от того, что JavaScript. В качестве альтернативы вы могли бы иметь в виду «элемент выбора» (это все, что вы показали). Что он? – Quentin

+1

«Теперь, очевидно, это не работает» - Почему очевидно? Какое поведение вы получаете? Какое поведение вы ожидаете? Какие сообщения об ошибках сообщаются в вашей консоли JavaScript? – Quentin

+0

Это выглядит так, как будто вам нужно больше внимания уделять тому, где вы ставите свои двойные и одиночные кавычки. – Quentin

ответ

1

Вы должны использовать document.write() для вставки содержимого «на лету» во время загрузки документа.

По MDN's doc:

Запись в документе, который уже загружен без вызова document.open() автоматически выполнит document.open() вызов

И от document.open():

Если документ существует в мишени, этот метод очищает его

Так, используя document.write() после того, как документ будет загружен, будет перезаписан (или очищен) ваш документ. По таким причинам, using document.write() is considered a bad practice.

Использование

document.body.innerHTML+= '<img src="example.com/images/pic' +selectedType+ '"/>'; 

вместо этого будет решить проблему.

Смотрите также What are alternatives to document.write?

Смежные вопросы