javascript - 如何使用动态生成的 html 输入类型实时填充 div

Question

我正在尝试使用选择选项填充 div，但我现在不知道从哪里开始...

我有一些代码可以实时编辑 div 的“标题”，但现在我想将他的选项添加到特定的 div...

这是我现在拥有的代码:

 var rooms = $("#howmanyrooms").val();
            var roomcounter = 1;
            $(".design-your-system-page-playground-container").show();
            for (var i = 0; i < rooms; i++) {
                //    $("<div class='appendeddiv'>Room-" + roomcounter++ + "</div>").appendTo(".housecontainer");
                //    $("<span>Room-" + roomcounter + " name</span>&nbsp;<input type='text' placeholder='name' id='room-" + roomcounter + "-id'></div></br>").appendTo(".infoncontainer");
                //
                $("<div class='design-your-system-page-rooms targetDiv_" + roomcounter + "'>Room-" + roomcounter + "</div>").appendTo(".design-your-system-page-house");
                $("<span>Room-" + roomcounter + " name</span>&nbsp;<input type='text' placeholder='name' id='room-" + roomcounter + "-id' class='textInput' lang='targetText_" + roomcounter + "'>&nbsp<select>Heating<option value='radiator'>Radiator</option><option value='underfloor'>Underfloor</option><option value='electric'>Electric</option></select>&nbsp;<select class='design-your-system-number-of-radiator-select'><option value='0'>0</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></select>&nbsp;<span>Do you want the room to be smart (footprint) ?<input type='radio' name='smart-yes' value='smart-yes'>Yes</input>&nbsp;<input type='radio' name='smart-no' value='smart-no'>No</input></div></br>").appendTo(".design-your-system-page-edit-room-container");
                roomcounter++;
            };
            if ($('.design-your-system-page-house').find('.design-your-system-page-rooms').length) {
                $("#buttonaddrooms").hide();
            }

            $("input.textInput").on("keyup", function () {
                var target = $(this).attr("lang").replace("Text", "Div");
                $("." + target).text($(this).val());
            });

如您所见，当我单击按钮时，我将向父级附加与在文本框中输入的值一样多的子 div，并且我还创建相同数量的包含名称和其他选项的“行”(两个选择和一个 radio )我已经能够实时编辑相对 div 的名称，但现在我想向该 div 添加其他选项

这里有一个 jsfiddle 可以帮助您了解我拥有什么和我想要什么: http://jsfiddle.net/3cyST/

如果不清楚，请告诉我。谢谢

Answer 1

请检查this fiddle :

我将您的 target 变量设置为全局可重用，我还为您的第一个 select 元素添加了一个类，它是 selecting

我更新了它，现在它使用以下方式附加测试 onchange 的值:

 $("select.selecting").on("change", function () {
                $("." + target).append($(this).val());
            });

现在你可以为剩下的事情工作了。

编辑(针对评论中OP的问题):

要获取单选按钮的值，我将为您提供2种方法:

在 Javascript 中:

if (document.getElementById('ID_OF_RADIO').checked) {
  rate_value = document.getElementById('ID_OF_RADIO').value;
}

在 jQuery 中:

$("input[name=RADIO_NAME]:checked").val();