如何使用動態生成的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附加到父項，並且我還將創建相同數量的“行”，其中包含名稱和其他選項（兩個select和收音機）我已經可以實時編輯ral div的名稱，但是現在我想在該div中添加其他選項

這是一個jsfiddle，可幫助您了解我擁有的東西和想要的東西： http : //jsfiddle.net/3cyST/

如果不清楚，請告訴我。 謝謝

Answer 1

請檢查此小提琴：

我提出的target變量全球受到重用，我還添加了類為第一個select元件，其selecting

ive更新了它，現在它使用以下命令附加了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();

Answer 2

給選擇一個ID，然后使用

$("#id").on("change",function(){
    console.log(this.value);
    //whatever you want to do with the value
})

...與單選按鈕和其他選項相同...也請注意，單選按鈕不應使用不同的名稱：

<input type='radio' name='radio_{put id here}' value='yes'>Yes</input>
<input type='radio' name='radio_{put id here}' value='no'>No</input>

代碼可讀性的另一件事：嘗試使用模板...。只需在代碼中放入帶id的<noscript> ...使用一些獨特的語法將占位符放入其中，並在運行時替換它們：

HTML：

<noscript id="template">
    RoomName: <input type="text" id="roomName_%ROOMID%" />
    Do you want...
    <input type='radio' name='radio_%ROOMID%' value='yes'>Yes</input>
    <input type='radio' name='radio_%ROOMID%' value='no'>No</input>
</noscript>

JS：

for (var i = 0; i < rooms; i++) {
    var tplcode = $("#template").html();
    tplcode = tplcode.replaceAll("%ROOMID%",roomcounter);
    $($.pareHTML(tplcode)).appendTo(".design-your-system-page-edit-room-container");

    $("input[name='radio_"+roomcounter+"']").on("change",function(){
        console.log("user wants:" + $("input[name='radio_"+roomcounter+"'][checked]").val())
    });
    roomcounter++;
}



// these functions help replacing multiple occurances
String.prototype.replaceAll = function(find,replace){
    return this.replace(new RegExp(escapeRegExp(find), 'g'), replace);
}

//escapse all regEx chars, so the string may be used in a regEx
function escapeRegExp(str) {
    return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
}

小提琴： http ： //jsfiddle.net/3cyST/4/