Зависимый селект - JavaScript, Ajax - Страница 4

web-coder · 28.06.2019, 23:02

Да уж... какое-то костыльное решение вы придумали...
А что мешает подключить select2?
Это делается достаточно просто.
Вы же можете подключить произвольный JS файл на странице?

fromthemoon · 29.06.2019, 10:39

Нет я не могу ничего подключать, возможности конструктора ограничены, у каждого дива класса своё назначение, которые завязаны на внутренних системных скриптах, к которым доступа у меня нет, к сожалению приходится изворачиваться и придумывать глупости да бы лишь работало

web-coder · 29.06.2019, 14:34

Там всего то нужно прописать в head

Код:

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>

А потом сможете использовать для любого списка.

И еще, id="pokr" - это же вы вручную указываете. Значит можно менять разметку.

fromthemoon · 29.06.2019, 15:35

Цитата:

Сообщение от web-coder

Там всего то нужно прописать в head
Код:
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
А потом сможете использовать для любого списка.

И еще, id="pokr" - это же вы вручную указываете. Значит можно менять разметку.

Да, вы правы, менять я её могу, но переиначивать структуру никак не могу, т.е. если там идет t-product__option-variants, так он и должен там сохраняться

web-coder · 29.06.2019, 19:10

Цитата:

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

если там идет t-product__option-variants, так он и должен там сохраняться

Ну и пусть будет. Он не мешает.
Для select вы можете дополнительно свой класс добавить? Или только id?

fromthemoon · 30.06.2019, 12:50

можно и класс добавить и id

web-coder · 30.06.2019, 15:03

Цитата:

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

можно и класс добавить и id

Ну так подключайте select2, и не нужно ничего изобретать...
Только id у списков в окне уберите. Т.к. модальное окно потом клонируется и получаются дубли. Это не правильно.
Обращайтесь к спискам через класс.

fromthemoon · 30.06.2019, 23:45

Нельзя на этой платформе использовать какие либо плагины, не работают они, никак, поставите свои, перестанут открываться popup вовсе

fromthemoon · 30.06.2019, 23:46

Цитата:

Сообщение от web-coder

Ну так подключайте select2, и не нужно ничего изобретать...
Только id у списков в окне уберите. Т.к. модальное окно потом клонируется и получаются дубли. Это не правильно.
Обращайтесь к спискам через класс.

Я абсолютно не имею представления как чего подключить, закинуть в head я могу эти строчки, но думаю этого мало будет.

web-coder · 01.07.2019, 01:59

Набросал примерно, как нужно делать.
В строке var baseUrl = "/images"; указываете папку с изображениями цветов покрытий. Названия самих изображений должны соответствовать значениям в списке. То есть для "Сосна" изображение должно называться "Сосна.png" и т.д.

Код:

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://static.tildacdn.com/js/jquery-1.10.2.min.js"></script>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" />
	<style>
		/*обертка селекта*/
		.select2-container{
		  outline: 0 !important;
		  box-shadow: none !important;
		}
		select + .select2-container{
		  width: 180px !important;
		}
		/*селект*/
		.select2-container--default .select2-selection--single {
		  background: #615050;
		  border: 0 !important;
		  border-radius: 5px;
		  outline: 0 !important;
		  box-shadow: none !important;
		}
		/*открытый селект*/
		.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
		.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
		  border-radius: 5px 5px 0 0;
		}
		/*высота селекта*/
		.select2-container .select2-selection--single {
		  height: 26px;
		}
		/*основная надпись*/
		.select2-container--default .select2-selection--single .select2-selection__rendered {
		  color: #f5f1e8;
		  line-height: 26px;
		}
		/*обертка стрелки*/
		.select2-container--default .select2-selection--single .select2-selection__arrow{
		  height: 26px;
		  width: 29px;
		}
		/*стрелка*/
		.select2-container--default .select2-selection--single .select2-selection__arrow b,
		.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
			height: 0;
			left: 50%;
			margin-left: -6px;
			margin-top: -3px;
			position: absolute;
			top: 50%;
			width: 0;
		    border: 0 !important;
		    border-top: 6px solid #f5f1e8 !important;
		    border-left: 6px solid transparent !important;
		    border-right: 6px solid transparent !important;
		}
		.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{
		  transform: rotate(-180deg);
		}
		/*основная надпись*/
		.select2-container .select2-selection--single .select2-selection__rendered{
		  padding-left: 10px;
		  padding-right: 10px;
		  font-size: 14px;
		}
		/*выпадающий список с пунктами*/
		.select2-dropdown {
		  border: 0;
		  background: #615050;
		  border-top: 0;
		  border-radius: 0 0 5px 5px !important;
		  color: #f5f1e8;
		  font-size: 14px;
		  position: relative;
		  padding: 7px 0;
		}
		/*пункт*/
		.select2-results__option{
		  padding: 4px 30px 4px 10px;
		  position: relative;
		  background: #615050 !important;
		  color: #f5f1e8 !important;
		}
		.select2-results__option:hover{
			background: #ad9a6f !important;
		}
		.select2-results__option[role="group"]{
			background: #615050 !important;
		}
		/*изображение в пункте*/
		.select2-results__option .img-icon{
			width: 18px;
			height: auto;
			margin-right: 3px;
			position: relative;
			top: 2px;
		}
		/*активный пункт*/
		.select2-container--default .select2-results__option[aria-selected="true"] {
		  background: #ad9a6f !important;
		  color: #f5f1e8 !important;
		}
		/*пункты не доступные для выбора*/
		.select2-container--default .select2-results__option[aria-disabled="true"]{
		  display: none;
		}

		.select2-container--default .select2-results__group{
			display: none;
		}
	</style>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
	<script>
		function formatIcon (state) {
			if (!state.id) {
				return state.text;
			}
			var baseUrl = "/images";
			var $state = $(
				'<span><img src="' + baseUrl + '/' + state.element.value.toLowerCase() + '.png" class="img-icon" /> ' + state.text + '</span>'
				);
			return $state;
		};
		$(document).ready(function(){
			$(".custom-select-coating").select2({
				minimumResultsForSearch: Infinity,
			});
			$(".custom-select-color").select2({
				minimumResultsForSearch: Infinity,
				templateResult: formatIcon,
			});
			$(document).on('change', '.custom-select-coating', function(){
				var coating = $(this).val();
				$(".custom-select-color option").prop('disabled', true);
				$(".custom-select-color optgroup[label='"+coating+"'] option").prop('disabled', false);
				$(".custom-select-color").select2({
					minimumResultsForSearch: Infinity,
					templateResult: formatIcon,
				});
			});
		});
	</script>
</head>
<body>
	<div class="t750__price-wrapper">
		<div class="t-product__option js-product-option newselect spiski">
			<div class="t-product__option-title t-descr t-descr_xxs js-product-option-name">Вид покрытия:</div>
			<div class="t-product__option-variants">
				<select class="t-product__option-select t-descr t-descr_xxs js-product-option-variants custom-select-coating">
					<option value="Без покрытия">Без покрытия</option>
					<option value="Морилка">Морилка</option>
					<option value="Лак">Лак</option>
					<option value="Акрил">Акрил</option>
				</select>
			</div>
		</div>
		<div class="t-product__option js-product-option newselect spiski">
			<div class="t-product__option-title t-descr t-descr_xxs js-product-option-name">Цвет:</div>
			<div class="t-product__option-variants">
				<select class="t-product__option-select t-descr t-descr_xxs js-product-option-variants custom-select-color">
					<optgroup label="Морилка">
						<option disabled value="Бесцветный">Бесцветный</option>
						<option disabled value="Сосна">Сосна</option>
						<option disabled value="Тик">Тик</option>
						<option disabled value="Орех">Орех</option>
						<option disabled value="Махагон">Махагон</option>
						<option disabled value="Темный дуб">Темный дуб</option>
						<option disabled value="Палисандр">Палисандр</option>
						<option disabled value="Каштан">Каштан</option>
						<option disabled value="Рябина">Рябина</option>
						<option disabled value="Белый">Белый</option>
						<option disabled value="Золотой бор">Золотой бор</option>
						<option disabled value="Дуб">Дуб</option>
					</optgroup>
					<optgroup label="Лак">
						<option disabled value="Бесцветный">Бесцветный</option>
					</optgroup>
					<optgroup label="Акрил">
						<option disabled value="Жёлтый">Жёлтый</option>
						<option disabled value="Фиолетовый">Фиолетовый</option>
						<option disabled value="Красный">Красный</option>
						<option disabled value="Оранжевый">Оранжевый</option>
						<option disabled value="Синий">Синий</option>
						<option disabled value="Голубой">Голубой</option>
						<option disabled value="Зелёный">Зелёный</option>
					</optgroup>
				</select>
			</div>
		</div>
	</div>
</body>
</html>

28.06.2019, 23:02	#31
web-coder Пользователь Регистрация: 27.05.2019 Сообщений: 70	Да уж... какое-то костыльное решение вы придумали... А что мешает подключить select2? Это делается достаточно просто. Вы же можете подключить произвольный JS файл на странице? Лучший сервис выбора хостинга по параметрам. Более 600 тарифов. Есть промокоды!

29.06.2019, 14:34	#33
web-coder Пользователь Регистрация: 27.05.2019 Сообщений: 70	Там всего то нужно прописать в head Код: `<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>` А потом сможете использовать для любого списка. И еще, id="pokr" - это же вы вручную указываете. Значит можно менять разметку. Лучший сервис выбора хостинга по параметрам. Более 600 тарифов. Есть промокоды!

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Зависимый 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

29.06.2019, 10:39	#32
fromthemoon Пользователь Регистрация: 17.06.2019 Сообщений: 29	Нет я не могу ничего подключать, возможности конструктора ограничены, у каждого дива класса своё назначение, которые завязаны на внутренних системных скриптах, к которым доступа у меня нет, к сожалению приходится изворачиваться и придумывать глупости да бы лишь работало

30.06.2019, 12:50	#36
fromthemoon Пользователь Регистрация: 17.06.2019 Сообщений: 29	можно и класс добавить и id

30.06.2019, 23:45	#38
fromthemoon Пользователь Регистрация: 17.06.2019 Сообщений: 29	Нельзя на этой платформе использовать какие либо плагины, не работают они, никак, поставите свои, перестанут открываться popup вовсе