Зависимый селект

[fromthemoon]

Спасибо и это круто всё, но у меня нет никаких папок, изображения грузятся со стоков

[fromthemoon]

https://smirnovstolyar.ru/my_example_page вот такой результат вышел при вставке вашего кода, все option заблочены и не работают, в консоли показывается сообщение о том, что TypeError: $(...).select2 is not a function - селект2 не является функцией

[web-coder]

select2, я смотрю, вы уже подключили.
В вашем случае нужно добавить еще

.select2-dropdown {
  z-index: 99999999;
}

И стрелку еще можно убрать

.select2-container--default .select2-selection--single .select2-selection__arrow{
  display: none;
}

[fromthemoon]

Отлично, какой сервис по сохранению фото можно использовать, которым пользуюсь я не сохраняет названия с кириллицей?

[web-coder]

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

какой сервис по сохранению фото можно использовать

А в конструкторе нельзя загружать фото?
Обычные фотохостинги меняют названия, чтобы избежать дублей.
Еще как вариант, можете купить платный хостинг для сайтов, и на него уже загружать свои картинки. Перейдите по ссылке у меня в подписи. Там есть достаточно дешевые хостинги (от 19 руб. в месяц).

[fromthemoon]

В конструкторе можно загружать фото, но их нельзя папкой отдельной сделать, т.е. прям на страницу и никак иначе

[web-coder]

Нет, value в пунктах списка должен совпадать с названиями изображений.

[fromthemoon]

<option value="Бесцветный" class="icon-stain-colorless">Бесцветный</option>

.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;
}

А так нельзя сделать?

[web-coder]

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

А так нельзя сделать?

Нет, классы для option там не учитываются.

В принципе, можно придумать решение. Но это, конечно, будет костыль...

var colorsArr = {
	'Бесцветный' : 'https://i.ibb.co/hdJxxvM/stain-colorless.png',
	'Сосна' : 'https://i.ibb.co/hdJxxvM/stain-colorless.png',
	'Тик' : 'https://i.ibb.co/hdJxxvM/stain-colorless.png',
	'Орех' : 'https://i.ibb.co/hdJxxvM/stain-colorless.png'
}
function formatIcon (state) {
	if (!state.id) {
		return state.text;
	}
	var itemValue = state.element.value;
	if(typeof colorsArr[itemValue] === 'undefined'){
		return state.text;
	}
	var $state = $(
		'<span><img src="' + colorsArr[itemValue] + '" class="img-icon" /> ' + state.text + '</span>'
		);
	return $state;
};

В colorsArr нужно записать все value списка и изображения, которые им соответствуют.

[fromthemoon]

Огромное вам спасибо, просто слов нет, как я рад, что вы помогли и всё работает, очень долго мучался и мучал других своими глупыми вопросами! В будущем планирую уйти от конструктора, уже из таких танцев понял, что это несовсем хорошее решение.