Выпадающий select список на всю ширину блока?

Добрый день, есть подобный элемент. При клике на позицию, происходит выпадание списка, с выбором

<select> и <options>

Сейчас реализовано так и это - не то, что требуется мне.
5d593af198357467484601.png

https://owen.ru/product/trm133m/modifications_02

Требуется сделать похожую конструкцию, как Выше по ссылке (без БД и выборки данных), то есть сделать просто выпадающий список с несколькими элементами на выбор на всю ширину блока. Делал через

<select> и <options>

- но сам список выпадает под самим элементом . Абсолютное позиционирование не идёт, так как лист определяет положение относительно родителя , а не всего блока, в который обернуты все элементы.

Вопрос, как реализовать подобное? Искал jQuery инструменты - не нашёл. Только кастомые селект листы и не более.

Конструкция моего выпадающего списка, которая не работает, как требуется, но возможно, поможет.
<div class="constructor__block">
								<span class="constructor__block-title">Волна</span>
								<select class="flexible__list">
									<option data-display="X1">X1</option>
									<option value="1">ДУ</option>
									<option value="2">ПП</option>
								</select>
								<select class="flexible__list">
									<option data-display="X2">X2</option>
									<option value="1">09</option>
									<option value="2">12</option>
									<option value="3">18</option>
									<option value="4">25</option>
									<option value="5">32</option>
									<option value="6">40</option>
									<option value="7">50</option>
									<option value="8">65</option>
									<option value="9">80</option>
									<option value="10">95</option>
								</select>
								<select class="flexible__list">
									<option data-display="X3">Х3</option>
									<option value="1">1</option>
									<option value="2">3</option>
								</select>
								<select class="flexible__list">
									<option data-display="X4">Х4</option>
									<option value="1">У1</option>
									<option value="2">У2</option>
									<option value="3">УХЛ4</option>
								</select>
								<select class="flexible__list">
									<option data-display="X5">Х5</option>
									<option value="1">А</option>
									<option value="2">Б</option>
								</select>
								<select class="flexible__list">
									<option data-display="X6">Х6</option>
									<option value="1">1</option>
									<option value="2">2</option>
									<option value="3">3</option>
									<option value="4">4</option>
									<option value="5">5</option>
									<option value="6">6</option>
									<option value="7">7</option>
									<option value="8">8</option>
									<option value="9">9</option>
									<option value="10">10</option>
									<option value="11">11</option>
									<option value="12">12</option>
									<option value="13">13</option>
									<option value="14">14</option>
									<option value="15">15</option>
									<option value="16">16</option>
									<option value="17">17</option>
									<option value="18">18</option>
									<option value="19">19</option>
									<option value="20">20</option>
									<option value="21">21</option>
									<option value="22">22</option>
									<option value="23">23</option>
									<option value="24">24</option>
									<option value="25">25</option>
									<option value="26">26</option>
									<option value="27">27</option>
									<option value="28">28</option>
									<option value="29">29</option>
									<option value="30">30</option>
								</select>
								<select class="flexible__list">
									<option data-display="X7">Х7</option>
									<option value="1">1</option>
									<option value="2">2</option>
									<option value="3">3</option>
									<option value="4">4</option>
									<option value="5">5</option>
									<option value="6">6</option>
									<option value="7">7</option>
									<option value="8">8</option>
									<option value="9">9</option>
									<option value="10">10</option>
									<option value="11">11</option>
									<option value="12">12</option>
									<option value="13">13</option>
									<option value="14">14</option>
									<option value="15">15</option>
									<option value="16">16</option>
									<option value="17">17</option>
									<option value="18">18</option>
									<option value="19">19</option>
									<option value="20">20</option>
									<option value="21">21</option>
									<option value="22">22</option>
									<option value="23">23</option>
									<option value="24">24</option>
									<option value="25">25</option>
									<option value="26">26</option>
									<option value="27">27</option>
									<option value="28">28</option>
									<option value="29">29</option>
									<option value="30">30</option>
								</select>
								<select class="flexible__list">
									<option data-display="X8">Х8</option>
									<option value="1">АВР</option>
									<option value="2">Без АВР</option>
								</select>
  • Вопрос задан
  • 161 просмотр
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы