Мне нужна помощь в поиске решения jQuery для отображения нескольких изображений в предварительном просмотре DIV из выбранного списка изображений в форме.
Примере:
<select name="collection[]" id="collection" multiple="multiple">
<option value=""> - Select Image - </option>
<option value="image1.jpg">image1.jpg</option>
<option value="image2.jpg">image2.jpg</option>
<option value="image3.jpg">image3.jpg</option>
</select>
<div id="imagePreview">
Display image here, preferrably in a table/group. When the user deselects from the list the image disappears from this div.
</div>
Я видел этот сценарий jquery в ответе раньше (ниже), но он не работает с кратными.
<script type="text/javascript">
$(document).ready(function() {
$("#collection").change(function() {
var src = $(this).val();
$("#imagePreview").html(src ? "<img src='" + src + "'>" : "");
});
});
</script>
Любая помощь очень ценится! Спасибо.
2 ответа
Из документов:
Метод .val () в основном используется для получить значения элементов формы. В случай
элементы, .val () метод возвращает массив содержащий каждую выбранную опцию.
Итак, вам просто нужно перебрать каждый элемент в массиве src:
var src = $(this).val();
// Clear the preview area first
$('#imagePreview').empty();
// Loop through all selected options
for (var i = 0; i < src.length; i++) {
$("#imagePreview").append($('<img>', {src: src[i]}));
}
Обратите внимание, что я использовал $('<img>', {src: src[i]}), который является более простым способом создания элементов с динамическими атрибутами, чем соединение строк вместе.
Если это было полезно для кого-то, я построил решение и в итоге получил:
$("#collection").change(function () {
var str = "";
$("select option:selected").each(function () {
str += "<img src='" + $(this).val() + "' border='0' style='padding: 3px;' alt=\"" + $(this).text() + "\" /> ";
});
$("#imagePreview").html(str);
})
.change();
});
Это дало мне больше контроля над текстом и значениями в форме и позволило лучше контролировать тег img.
Похожие вопросы
Новые вопросы
jquery
jQuery — это библиотека JavaScript. Также рассмотрите возможность добавления тега JavaScript. jQuery — это популярная кросс-браузерная библиотека JavaScript, которая упрощает обход объектной модели документа (DOM), обработку событий, анимацию и взаимодействие AJAX, сводя к минимуму расхождения между браузерами. Вопрос с тегом jQuery должен быть связан с jQuery, поэтому jQuery должен использоваться рассматриваемым кодом, и в вопросе должны быть как минимум элементы, связанные с использованием jQuery.
console.logилиalertвнутри функцииchangeи посмотрите, всегда ли запускается обработчик.