Торговые предложения вывести списком?

Question

[Иван Иванов]

В детальном просмотре товара нужно вывести свойства торгового предложения раскрывающийся список свойств.

Подскажите как реализовать, сейчас свойства выводятся в таком виде :



Необходимо сделать в таком виде:

Comments

[Александр Воробьев]

Тут вопрос не про битрикс, а про верстку. Варианта (направления решения) тут два:
1. Не меняя верстки изменить стилями внешний вид и написать JavaScript реализующий функционал выпадающего списка. Преимущество подхода в том, что можно решить "не трогая" шаблон, если у вас шаблон сторонний и с обновлениями - ваши изменения не пропадут при очередном
2. Заменить в верстке вывод этого списка значений на тег select и option и применить, если необходимо, какую либо библиотеку для стилизации стандартных выпадающих списков

[Иван Иванов]

Александр Воробьев, Если использовать второй вариант вами предложенный, то получается изначально список выводиться через <ul><li>1</li><li>2</li><li>3</li><ul>

Делаем через select

<select>
												<?php
												foreach ($skuProperty['VALUES'] as &$value)
												{
													$value['NAME'] = htmlspecialcharsbx($value['NAME']);

													if ($skuProperty['SHOW_MODE'] === 'PICT')
													{
														?>
														<li class="product-detail-scu-item-color-container" title="<?=$value['NAME']?>"
															data-treevalue="<?=$propertyId?>_<?=$value['ID']?>"
															data-onevalue="<?=$value['ID']?>">
															<div class="product-detail-scu-item-color-block">
																<div class="product-detail-scu-item-color" title="<?=$value['NAME']?>"
																	style="background-image: url('<?=$value['PICT']['SRC']?>');">
																</div>
															</div>
														</li>
														<?php
													}
													else
													{
														?>
														
														<option class="product-detail-scu-item-text-container" title="<?=$value['NAME']?>"
															data-treevalue="<?=$propertyId?>_<?=$value['ID']?>"
															data-onevalue="<?=$value['ID']?>">
															<div class="product-detail-scu-item-text-block">
																<div class="product-detail-scu-item-text"><?=$value['NAME']?></div>
															</div>
														</option>
														
														<?php
													}
												}
												?>
											</select>

То список значений появляется как нужно, но выбранный параметр не выводит нужное торговое предложение, в script.js querySelectorAll('li'); заменил на querySelectorAll('option');

if (intNumber > -1 && intNumber < lineContainer.length)
			{
				rowItems = lineContainer[intNumber].querySelectorAll('option');
				for (i = 0; i < rowItems.length; i++)
				{
					value = rowItems[i].getAttribute('data-onevalue');
					isCurrent = value === activeId;

					if (isCurrent)
					{
						BX.addClass(rowItems[i], 'selected');
					}
					else
					{
						BX.removeClass(rowItems[i], 'selected');
					}

					if (BX.util.in_array(value, canBuyId))
					{
						BX.removeClass(rowItems[i], 'notallowed');
					}
					else
					{
						BX.addClass(rowItems[i], 'notallowed');
					}

[Александр Воробьев]

Иван Иванов, когда с select и option работаете надо работать с атрибутом selected.