0 / 0 / 0
Регистрация: 22.08.2015
Сообщений: 73
1

Загрузить картинку до получения значения выпадающего списка

26.10.2016, 21:26. Показов 1482. Ответов 4
Метки нет (Все метки)

Есть выпадающий список, в котором в зависимости от выбранного значения показывает картинку(получаю путь к картинке из value)
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
 <head>
  <meta charset="windows-1251">
  <title>Список</title>
<script type="text/javascript" src="res\jquery.js"></script> <script type="text/javascript" src="res\jquery.chained.js"></script>
<link href="res\select-style.css" rel="stylesheet">
<style>
   .colortext {
     color: red;
   }
  </style>
  </head>
 <body>
<center>
    <h1><font face="CURSIVE">Картинки</font><span class="colortext" ><sub><font  size="-1"
face="MV BOLI">BETA</font></sub></span><h1></center>
<p align="center">
<select id="programming" class="select-style">
  <option value="">...</option>
  <option value="chiv">Животные</option>
  <option value="ptic">Птицы</option>
  <option value="rast">Растения</option>
</select>
<select id="categories" class="select-style">
  <option value="">...</option>
  <option value="img\зебра.jpg" class="chiv">Зебра</option>
  <option value="img\лев.jpg" class="chiv">Лев</option>
   <option value="img\аист.jpg" class="ptic">Аист</option>
   <option value="img\дуб.jpg" class="rast">Дуб</option>
</select></p>
<p align="center"><input type="hidden" value="Показать!"></p>
<script type="text/javascript"> jQuery(document).ready(function(){ jQuery("#categories").chained("#programming"); jQuery("#articles").chained("#categories"); }); </script>
<center><img id="img" src="value" align="middle" hspace="50" vspace="20" /></center>
  <script>
    var select = document.getElementById('categories'),
      img = document.getElementById('img');
    select.addEventListener('change', changeImg.bind(this),false)
    function changeImg(elem) {
      img.src = elem.target.value
    }
  </script>
 </body>
</html>
Но при загрузке страницы пока еще нет никакого значения value, показывает что картинка не загрузилась(что она там вообще должна быть, но пока не выбрана)(см скриншот)
Как убрать этот значок или вместо него выводить другую картинку с самого начала, пока не выбран пункт в списке, а потом выбранная картинка заменяет начальную
Изображения
 
__________________
Помощь в написании контрольных, курсовых и дипломных работ, диссертаций здесь
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
26.10.2016, 21:26
Ответы с готовыми решениями:

Конкретные значения из выпадающего списка на форме в зависимости от значения другого выпадающего списка
Добрый день! Помогите решить вопрос: есть база данных (прилагается) и в ней на форме хочу, чтобы во...

Вывод картинки после получения кода из выпадающего списка
Есть выпадающий список(код прилагается), в нем виды картинок, как сделать чтобы после выбора...

Значения из выпадающего списка
Добрый день. Как сделать что бы при выборе значения из выпадающего списка, в соседних ячейках...

Значения выпадающего списка
Есть выпадающий список который заполняется с таблицы mysql, как записать выбранные значения в...

4
Модератор
Эксперт JSЭксперт HTML/CSS
3823 / 2673 / 1521
Регистрация: 12.07.2015
Сообщений: 6,674
Записей в блоге: 4
26.10.2016, 21:34 2
В стилях указываете:
CSS
1
2
3
#img{
  visibility: hidden;
}
А в скрипте
Javascript
1
img.style.visibility = 'visible';
0
0 / 0 / 0
Регистрация: 22.08.2015
Сообщений: 73
26.10.2016, 21:37  [ТС] 3
mrtoxas, тогда вообще никакие картинки не показывает
0
Модератор
Эксперт JSЭксперт HTML/CSS
3823 / 2673 / 1521
Регистрация: 12.07.2015
Сообщений: 6,674
Записей в блоге: 4
26.10.2016, 21:49 4
Лучший ответ Сообщение было отмечено ilya1099 как решение

Решение

Попробуйте просто стиль добавить
CSS
1
2
3
[src="value"]{
  visibility: hidden;
}
HTML5
1
<img id="img" src="value" align="middle" hspace="50" vspace="20" />
1
0 / 0 / 0
Регистрация: 22.08.2015
Сообщений: 73
26.10.2016, 21:52  [ТС] 5
mrtoxas, заработало, спасибо
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
26.10.2016, 21:52
Помогаю со студенческими работами здесь

Проверка значения из выпадающего списка
Нужно проверить соответствует ли значение из выпадающего списка в условии js. Я поняла, что я...

Вычисление значения из выпадающего списка
Есть выпадающее окно с полями id, name, massa im1 Есть соседнее поле в ленточной таблице. ...

Вывод значения из выпадающего списка
как вывести значения value в пост? &lt;select name=&quot;ob&quot;&gt; &lt;option value=&quot;1&quot;&gt;Выберите из...

Не выводит значения выпадающего списка
Здравствуйте! Проблема такова: хочу сделать выпадающий список со значениями. Значения формируются в...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2022, CyberForum.ru