[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Перенос данных из select в input
danial
<div class="orenda1">
<div
class="zag"> <label>Аренда</label> </div>
<div> <select
id="select-2" class="uk-input" name="arendab">
<option
class="a" value="aa">200 кв м</option>
<option
class="a" value="ab">300 кв м</option>
<option
class="a" value="ac">400 кв м</option>
<option
class="b" value="ba">зерноуборочный комбайн GS2124</option>

<option
class="b" value="bb">кукурузоуборочный комбайн Херсонец-200</option>
<option
class="b" value="bc">кормоуборочный комбайн FS8060</option>
<option
class="c" value="ca">C-A</option>
<option
class="c" value="cb">C-B</option>
<option
class="c" value="cc">C-C</option>
</select> </div>
</div>

<div
class="orenda1">
<div
class="zag"> <label>Цена</label> </div>
<div> <select
id="select-3" class="uk-input" name="money">
<option
class="aa" value="aaa">800</option>
<option
class="ab" value="aba">900</option>


<option
class="ac" value="aca">1000</option>

<option
class="ba" value="baa">600</option>
<option
class="bb" value="bba">650</option>

<option
class="bc" value="bca">650</option>
<option
class="ca" value="caa">C-A-A</option>
<option
class="ca" value="cab">C-A-B</option>
<option
class="cb" value="cba">C-B-A</option>
<option
class="cb" value="cbb">C-B-B</option>

<option
class="cc" value="cca">C-C-A</option>
<option
class="cc" value="ccb">C-C-B</option>
</select> </div>
</div>

[js]<script>
(() => {
const dynamicSelect = (id1, id2) => {
// Определение переменных, ссылающихся на списки
const sel1 = document.getElementById(id1);
const sel2 = document.getElementById(id2);
// Клонирование динамического списка
const clone = sel2.cloneNode(true);
// Определение переменных для клонированных элементов списка
const clonedOptions = clone.getElementsByTagName("option");
// Вызов функции собирающей вызываемый список
refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
// При изменении выбранного элемента в первом списке: // вызов функции пересобирающей вызываемый список
sel1.addEventListener('change', () => {
refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
});
};

// Функция для сборки динамического списка
const refreshDynamicSelectOptions = (sel1, sel2, clonedOptions) => {
// Удаление всех элементов динамического списка
while (sel2.options.length) {
sel2.remove(0);
}
const selectedOption = sel1.options[sel1.selectedIndex].value;
// Перебор клонированных элементов списка
for (let i = 0; i < clonedOptions.length; i++) {
const option = clonedOptions[i];
// Если название класса клонированного option эквивалентно "select"
// либо эквивалентно значению option первого списка

if (option.classList.contains('select') ||
option.classList.contains(selectedOption)) {
// его нужно клонировать в динамически создаваемый список
sel2.appendChild(option.cloneNode(true));
}
}

// Отправляем событие change выбранного select
const event = document.createEvent('HTMLEvents');
event.initEvent('change', true, false);
sel2.dispatchEvent(event);
};

// Вызов скрипта при загрузке страницы
document.addEventListener("DOMContentLoaded", () => {
dynamicSelect("select-1", "select-2");
dynamicSelect("select-2", "select-3");
});
})();
</script>
<input type='text' />
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.