Форум

dreamer17 · #1 (**permalink**) 09.04.2022, 19:48

Доброго времени суток!
Пример скрипта
<select>
<option value="1">one</option>
<option value="2">two</option>
</select>
<div hidden>
</div>
<script src="js/jquery.js"></script>
<script>
var div = $('#div');
$(function ()
{
$('#select').change(function(){
var slc = $('option:selected',this).val();
if (slc=='1'){
if(div.attr('hidden') != undefined){
div.show();
div.removeAttr('hidden');
for(let i=1; i < 5; i++){
var inp = document.createElement('input');
inp.setAttribute('id', 'inp'+i);
div.append(inp);
}
}
if (slc=='2'){
if(div.attr('hidden') != undefined){
div.show();
div.removeAttr('hidden');
for(let i=1; i < 3; i++){
var inp = document.createElement('input');
inp.setAttribute('id', 'inp'+i);
div.append(inp);
}
}
});
});
</script>

Если выбрать какое-нибудь значение селекта, он создает input с количеством указанных в цикле, но если выбрать другое значение, то он добавляет к созданным элементам свое количество. Как сделать, чтобы прорисовывалось именно столько элементов, сколько необходимо при выборе определенного значения?

рони · #2 (**permalink**) 09.04.2022, 20:46

dreamer17,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

рони · #3 (**permalink**) 09.04.2022, 21:33

dreamer17,

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
    <select id="select">
<option value="">change</option>
<option value="1">one</option>
<option value="2">two</option>
</select>
    <div id="div" hidden>
    </div>
    <script>
        $(function() {
            var div = $('#div');
            $('#select').change(function() {
                var slc = this.value;
                div.empty();
                div[0].hidden = !slc;
                if (!slc) return;
                var limit = slc == '1' ? 4 : 2;
                for (let i = 0; i < limit;) {
                    var inp = $('<input>', {
                        id: 'inp' + ++i
                    });
                    div.append(inp);
                }
            });
        });
    </script>
</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript