Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 18.06.2019, 20:53   #11
web-coder
Пользователь
 
Аватар для web-coder
 
Регистрация: 27.05.2019
Сообщений: 70
По умолчанию

А как на счет кроссбраузерности?
В IE, Safari проверяли?
Лучший сервис выбора хостинга по параметрам.
Более 600 тарифов. Есть промокоды!
web-coder вне форума Ответить с цитированием
Старый 18.06.2019, 20:55   #12
fromthemoon
Пользователь
 
Регистрация: 17.06.2019
Сообщений: 29
По умолчанию

Вся проблема в том, что я не могу сделать их вывод в соответствии с выбором в первом селекте и убрать два события mouseleave и mouseover, но при этом сохранив картинки.

Цитата:
Сообщение от web-coder Посмотреть сообщение
В IE, Safari проверяли?
Не работает, только в этих двух, да возможно это очень плохо, но для меня это абсолютно неважно, ибо процент использования других браузеров вполне достаточен.

Последний раз редактировалось Вадим Мошев; 19.06.2019 в 00:35.
fromthemoon вне форума Ответить с цитированием
Старый 18.06.2019, 21:07   #13
web-coder
Пользователь
 
Аватар для web-coder
 
Регистрация: 27.05.2019
Сообщений: 70
По умолчанию

Цитата:
Сообщение от fromthemoon Посмотреть сообщение
не могу сделать их вывод в соответствии с выбором в первом селекте и убрать два события mouseleave и mouseover, но при этом сохранив картинки.
Почему?
Вот рабочий пример.
Код:
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.t750 .t-product__option-select {
		    width: 100%;
		    border: 1px #ddd solid;
		    background: #f8f8f8;
		    color: #000;
		    box-sizing: border-box;
		    cursor: pointer;
		    padding: 2px 30px 2px 10px;
		    border-radius: 5px;
		    -webkit-appearance: none;
		    appearance: none;
		    -moz-appearance: none;
		}
		.t-product__option-select {
		    width: 180px !important;
		    color: #f5f1e8 !important;
		    border: #f5f1e8 !important;
		    background: #615050 !important;
		}
		.icon-stain-colorless {
		    background: url(https://i.ibb.co/hdJxxvM/stain-colorless.png) no-repeat;
		    background-size: 20px;
		    padding-left: 30px;
		    background-position: 3px 1px;
		}
		.icon-stain-pine {
		    background: url(https://i.ibb.co/KXCF2pC/stain-pine.png) no-repeat;
		    background-size: 20px;
		    padding-left: 30px;
		    background-position: 3px 1px;
		}
	</style>
</head>
<body>
	<select id="colors" class="t-product__option-select t-descr t-descr_xxs js-product-option-variants" size="3">
		<option id="first2" hidden="hidden" disabled="" selected=""></option>
		<optgroup label="Морилка">
			<option value="Бесцветный" class="icon-stain-colorless">Бесцветный</option>
			<option value="Сосна" class="icon-stain-pine">Сосна</option>
		</optgroup>
	</select>
</body>
</html>
И я бы еще убрал это дергание списка при наведении.
Очень раздражает...
Лучший сервис выбора хостинга по параметрам.
Более 600 тарифов. Есть промокоды!

Последний раз редактировалось Вадим Мошев; 19.06.2019 в 00:36.
web-coder вне форума Ответить с цитированием
Старый 18.06.2019, 21:12   #14
fromthemoon
Пользователь
 
Регистрация: 17.06.2019
Сообщений: 29
По умолчанию

Цитата:
Сообщение от web-coder Посмотреть сообщение
И я бы еще убрал это дергание списка при наведении.
Очень раздражает...
Это как раз mouseleave и mouseover, как только удаляем эти события, тогда сразу исчезают иконки
fromthemoon вне форума Ответить с цитированием
Старый 18.06.2019, 21:28   #15
web-coder
Пользователь
 
Аватар для web-coder
 
Регистрация: 27.05.2019
Сообщений: 70
По умолчанию

Цитата:
Сообщение от fromthemoon Посмотреть сообщение
как только удаляем эти события, тогда сразу исчезают иконки
Не нужно привязываться к событиям.
Сразу укажите для списка class="t-product__option-select t-descr t-descr_xxs js-product-option-variants" и size="3"
Лучший сервис выбора хостинга по параметрам.
Более 600 тарифов. Есть промокоды!
web-coder вне форума Ответить с цитированием
Старый 18.06.2019, 21:50   #16
fromthemoon
Пользователь
 
Регистрация: 17.06.2019
Сообщений: 29
По умолчанию

Цитата:
Сообщение от web-coder Посмотреть сообщение
size="3"
Получилось, но не на всех карточках, я так понял надо перед всеми этими действиями, что выполняются посчитать карточки и применить на них уже общую инструкцию
fromthemoon вне форума Ответить с цитированием
Старый 18.06.2019, 22:06   #17
web-coder
Пользователь
 
Аватар для web-coder
 
Регистрация: 27.05.2019
Сообщений: 70
По умолчанию

Цитата:
Сообщение от fromthemoon Посмотреть сообщение
надо перед всеми этими действиями, что выполняются посчитать карточки и применить на них уже общую инструкцию
Можно сделать так
Код:
$(document).on('change', '#pokr', function(){
	var pokr = $(this).val();
	$('#colors optgroup.active').removeClass('active');
	$('#colors optgroup[label="'+pokr+'"]').addClass('active');
	var options_count = $('#colors optgroup[label="'+pokr+'"] option').length;
	if(options_count < 2) options_count = 2;
	$('#colors').attr('size', options_count);
});
Лучший сервис выбора хостинга по параметрам.
Более 600 тарифов. Есть промокоды!
web-coder вне форума Ответить с цитированием
Старый 18.06.2019, 22:40   #18
fromthemoon
Пользователь
 
Регистрация: 17.06.2019
Сообщений: 29
По умолчанию

Второй селект растягивается на всю страницу
Цитата:
Сообщение от web-coder Посмотреть сообщение
Код:
$(document).on('change', '#pokr', function(){
	var pokr = $(this).val();
	$('#colors optgroup.active').removeClass('active');
	$('#colors optgroup[label="'+pokr+'"]').addClass('active');
	var options_count = $('#colors optgroup[label="'+pokr+'"] option').length;
	if(options_count < 2) options_count = 2;
	$('#colors').attr('size', options_count);
});

Последний раз редактировалось Вадим Мошев; 19.06.2019 в 00:37.
fromthemoon вне форума Ответить с цитированием
Старый 18.06.2019, 23:02   #19
web-coder
Пользователь
 
Аватар для web-coder
 
Регистрация: 27.05.2019
Сообщений: 70
По умолчанию

Цитата:
Второй селект растягивается на всю страницу
А вам как нужно?
Хотите ограничить высоту?
Или задать фиксированную, вне зависимости от количества option?
Лучший сервис выбора хостинга по параметрам.
Более 600 тарифов. Есть промокоды!
web-coder вне форума Ответить с цитированием
Старый 19.06.2019, 01:33   #20
fromthemoon
Пользователь
 
Регистрация: 17.06.2019
Сообщений: 29
По умолчанию

Цитата:
Сообщение от web-coder Посмотреть сообщение
А вам как нужно?
Хотите ограничить высоту?
Или задать фиксированную, вне зависимости от количества option?
Сейчас, всё нормально выглядит, но не понимаю почему так, ведь я добавил только часть кода:

$(document).on('change', '#pokr', function(){
var pokr = $(this).val();
$('#colors optgroup.active').removeClass('acti ve');
$('#colors optgroup[label="'+pokr+'"]').addClass('active');
});

Однако он разошелся по всем карточкам. Больше спасибо вам за вашу огромную работу и помощь.

У меня есть несколько идей, но чуть позже предоставлю их на обозрение.
fromthemoon вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Зависимый div Dimafly HTML и CSS 2 28.02.2014 20:36
Раскрывающий зависимый список в форме. uznknown1 Microsoft Office Excel 26 05.01.2014 18:49
Не получается прикрутить селект. Predator199 JavaScript, Ajax 1 17.10.2012 20:42
Поиск в списке селект zatocnik JavaScript, Ajax 0 30.08.2012 17:16
Зависимый список vlad-minsk Microsoft Office Access 4 05.08.2010 11:32