Выполнение <script> При определенном class

@ilya1099 · Регистрация: 22.08.2015

Студворк — интернет-сервис помощи студентам

Есть связанные выпадающие списки и во втором списке к первому присвоен class. Как сделать чтобы скрипт js выполнялся только при определенном значении class?

@renat_dmitriev · 05.11.2016, 15:17

Сообщение от ilya1099

во втором списке к первому присвоен class

Загадочная фраза, прочитал раз пять не смог расшифровать. Я могу понять когда элементу присвоен класс, в этом случае вы считываете его значение например через свойство className DOM-элемента и выполняете или тне выполняете какой-то код в зависимости от его значения. Но что означает во втором списке к первому присвоен class лично мне непонятно.

@ilya1099 · 05.11.2016, 15:27 **[ТС]**

renat_dmitriev,

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<select id="programming">
  <option value="">...</option>
  <option value="chiv">Животные</option>
  <option value="ptic">Птицы</option>
  <option value="rast">Растения</option>
</select>
<select id="categories">
  <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>

@renat_dmitriev · 05.11.2016, 16:05

ilya1099,

А в какой момент должен выполняться скрипт? Если при выборе пользователем значения во втором списке, то примерно так

JavaScript
1
2
3
val = categories.value.replace('\\', '\\\\');
elem = categories.querySelector("[value='" + val + "']");
if(elem.className == 'нужное значение'){...тут ваш скрипт...};

@ilya1099 · 05.11.2016, 17:43 **[ТС]**

renat_dmitriev, Не запускается

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
val = categories.value.replace('\\', '\\\\');
elem = categories.querySelector("[value='" + val + "']");
if(elem.className == 'chiv'){
    var day=new Date();
    var pictures = ['Sunday.png',
                  'Monday.png',
          'Tuesday.png',
          'Wednesday.png',
          'Thursday.png',
          'Friday.png',
                  'Saturday.png'];
   document.write('<img src="' + pictures[day.getDay()] +'">'); 
};
</script>

@renat_dmitriev · 05.11.2016, 18:35

ilya1099, Так этот код должен быть внутри функции, вызываемой при срабатывании события onchange второго списка.

@ilya1099 · 05.11.2016, 19:18 **[ТС]**

renat_dmitriev, Или я не правильно что-то понимаю, или должно что-то такое получиться. Но пока запускаться он ни в какую не хочет

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
<select id="programming">
  <option value="">...</option>
  <option value="chiv">Животные</option>
  <option value="ptic">Птицы</option>
  <option value="rast">Растения</option>
</select>
<select id="categories" onchange="Add()">
  <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>
<script>  
function Add(){
val = categories.value.replace('\\', '\\\\');
elem = categories.querySelector("[value='" + val + "']");
if(elem.className == 'chiv'){
    var day=new Date();
    var pictures = ['Sunday.png',
                           'Monday.png',
                           'Tuesday.png',
                           'Wednesday.png',
                           'Thursday.png',
                           'Friday.png',
                           'Saturday.png'];
   document.write('<img src="' + pictures[day.getDay()] +'">'); 
}
};
</script>

@renat_dmitriev · 05.11.2016, 19:51

ilya1099, Да вроде все запускается

http://codepen.io/anon/pen/ENaVwO

@ilya1099 · 05.11.2016, 20:00 **[ТС]**

renat_dmitriev, это пути к выбранным пунктам не подгружает, если заменить value на простые слова, то ничего не происходит

@renat_dmitriev · 05.11.2016, 20:12

ilya1099, А что должно происходить при замене value на простые слова?

@ilya1099 · 05.11.2016, 20:15 **[ТС]**

renat_dmitriev, Ничего, мы проверяем что JS код не работает. По идее должно показывать что 2 картинки не загрузились, одна из value, вторая из JS кода

@renat_dmitriev · 05.11.2016, 20:21

ilya1099, Насколько мне позволяет увидеть мое зрение, код по ссылке абсолютно рабочий, он выполняется, появляется картинка с адресом из value, в чем можно убедиться, скопировав url появившейся картинки. Что именно у вас не работает я честно говоря перестал понимать, посему могу лишь пожелать удачи. =)

@ilya1099 · 05.11.2016, 20:43 **[ТС]**

renat_dmitriev, Эти 2 кода(выпадающий список и JS код с выводом актуальной даты) по отдельности все рабочие. Мне же нужно сделать связку чтобы если я выбирал определенное значение во втором выпадающем списке(допустим с class="chiv"), то 2(который JS) код начинал работать и выводил свою картинку(в итоге должно показывать два изображения, одно от выпадающего списка и одно от JS кода). Если же с другим class, то JS код бы просто пропускался.

Новые блоги и статьи Все статьи Все блоги /
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Нашел на реддите интересную статью под названием «Кто-нибудь знает, где получить бесплатный компьютер или. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .

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

	Выполнение <script> При определенном class 05.11.2016, 13:49. Показов 878. Ответов 12 Метки нет (Все метки) Есть связанные выпадающие списки и во втором списке к первому присвоен class. Как сделать чтобы скрипт js выполнялся только при определенном значении class? 0

@renat_dmitriev 392 / 294 / 121 Регистрация: 26.08.2016 Сообщений: 902
	05.11.2016, 18:35
	ilya1099, Так этот код должен быть внутри функции, вызываемой при срабатывании события onchange второго списка. 0

@renat_dmitriev 392 / 294 / 121 Регистрация: 26.08.2016 Сообщений: 902
	05.11.2016, 19:51
	ilya1099, Да вроде все запускается http://codepen.io/anon/pen/ENaVwO 0

@ilya1099 0 / 0 / 0 Регистрация: 22.08.2015 Сообщений: 73
	05.11.2016, 20:00 [ТС]
	renat_dmitriev, это пути к выбранным пунктам не подгружает, если заменить value на простые слова, то ничего не происходит 0

@renat_dmitriev 392 / 294 / 121 Регистрация: 26.08.2016 Сообщений: 902
	05.11.2016, 20:12
	ilya1099, А что должно происходить при замене value на простые слова? 0

@ilya1099 0 / 0 / 0 Регистрация: 22.08.2015 Сообщений: 73
	05.11.2016, 20:15 [ТС]
	renat_dmitriev, Ничего, мы проверяем что JS код не работает. По идее должно показывать что 2 картинки не загрузились, одна из value, вторая из JS кода 0

@renat_dmitriev 392 / 294 / 121 Регистрация: 26.08.2016 Сообщений: 902
	05.11.2016, 20:21
	ilya1099, Насколько мне позволяет увидеть мое зрение, код по ссылке абсолютно рабочий, он выполняется, появляется картинка с адресом из value, в чем можно убедиться, скопировав url появившейся картинки. Что именно у вас не работает я честно говоря перестал понимать, посему могу лишь пожелать удачи. =) 0

@ilya1099 0 / 0 / 0 Регистрация: 22.08.2015 Сообщений: 73
	05.11.2016, 20:43 [ТС]
	renat_dmitriev, Эти 2 кода(выпадающий список и JS код с выводом актуальной даты) по отдельности все рабочие. Мне же нужно сделать связку чтобы если я выбирал определенное значение во втором выпадающем списке(допустим с class="chiv"), то 2(который JS) код начинал работать и выводил свою картинку(в итоге должно показывать два изображения, одно от выпадающего списка и одно от JS кода). Если же с другим class, то JS код бы просто пропускался. 0