Question

我正在尝试使用select选项填充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，并且我还会创建包含名称和其他选项的相同数量的“row”（两个选择和一个广播）我已经能够实时编辑相关div的名称，但现在我想添加到该div还有其他选项

这里有一个帮助你理解我拥有和想要的东西： http://jsfiddle.net/3cyST/

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

Answer 1

请检查this小提琴：

我将您的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();

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/

如何使用动态生成的html输入类型来填充div

2 个答案: