<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];
if (option.classList.contains('select') ||
option.classList.contains(selectedOption)) {
sel2.appendChild(option.cloneNode(true));
}
}
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' />