Создание input в завимости от option SELECTED?

Question

[lid2pro]

Добрый день, помогите решить такую задачку..

Есть селект

<select id="select-platforms" name="platform[]" multiple>
<option SELECTED value="5">ПК</option>
<option SELECTED value="10">Xbox</option>
<option value="23">Playstation</option>
...
</select>

<div id="inputs"></div>

Нужно в зависимости от того какой выбран option в select динамически создавались input'ы в div id="inputs" , вида

<div class="classX">ПК <input type="text" value="" name="<b>value</b>" id="daterelease"></div>

(где ПК это то что до /option, name=value это value из option SELECTED). Соответственно если option стал не SELECTED, то соответствующий div... input... уходит.

Спасибо большое

Answer 1

[FabiBoom]

let selectPlatforms = document.querySelector('#select-platforms');
let inputsContainer = document.querySelector('#inputs');

selectPlatforms.addEventListener('change', renderInputs);

function renderInputs() {
    inputsContainer.innerHTML = '';

    for(let i = 0; i < selectPlatforms.options.length; i++) {
        let option = selectPlatforms.options[i];
        if(option.selected) {
            inputsContainer.insertAdjacentHTML('beforeend', createInput(option.text, option.value));
        }
    }
}

function createInput(text, name) {
    return `<div class="classX">${text} <input type="text" value="" name="<b>${name}</b>"></div>`;
}

renderInputs();

Вот только я не проверял )

Comments

[lid2pro]

почему-то не работает, ошибку на js не выдает

[FabiBoom]

lid2pro, проверил в песочнице, у меня все работает.

[FabiBoom]

lid2pro, немного поправил код

[lid2pro]

input-ы появились как надо, спасибо. Только как сделать чтоб они появлялись динамически? Т.е. если мы снимает select с option, то соответствующий input уходил?

[lid2pro]

Динамическое добавление получилось так,

заменил

selectPlatforms.addEventListener('change', renderInputs);

на

selectPlatforms.onchange = function() {
	renderInputs();
};