如何将文本添加到输入文本框中的值jquery

在下面的代码中，我添加了组的列表，如果我单击任何组，模型框将打开。我需要编辑从文本框中的值列表..如果我点击任何组..我的代码..数据显示相同的模式框..但我需要显示输入文本框中的模式框中的数据..如何将文本添加到输入文本框中的值jquery

DEMO

$(document).ready(function() { 
 
    var $appendItemsToList; 
 
    $("#btn2").click(function() { 
 
    var text = $('#newCheckText').val(); 
 
    $("#oo", $appendItemsToList).append('<input type="checkbox" /> ' + text + '<br />'); 
 
    $("#ol").append("<input type='text' value=" + text + "><br />"); 
 
    }); 
 

 
    $("#add_list").on('click', function() { 
 
    $("#list_group").append("<div class=" + 'opener' + "><h2>List (//click)</h2><div id=" + 'oo' + "><input type='checkbox' /><span>List item 1</span><br/><input type='checkbox' /><span>List item 2</span><br/><input type='checkbox' /><span>List item 3</span><br/></div></div>"); 
 
    }); 
 

 
    $("#dialog").dialog({ 
 
    autoOpen: false, 
 
    }); 
 

 
    $(document).on('click', '.opener', function() { 
 
    $appendItemsToList = $(this); 
 
    $("#dialog").dialog("open"); 
 
    $("#ol").html($('#oo', $appendItemsToList).html()); 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 

 
<button id="add_list">add list</button> 
 

 
<div id="dialog" title="Add List"> 
 
    <h2>List items</h2> 
 
    <div id="ol"> 
 
    <input value="List item 1"> 
 
    <br/> 
 
    <input value="List item 2"> 
 
    <br/> 
 
    <input value="List item 3"> 
 
    <br/> 
 
    </div> 
 
    <div id="oo"></div> 
 
    <input type="text" id="newCheckText" value="enter" /> 
 
    <button id="btn2">Add</button> 
 
</div> 
 
<div id="list_group"> 
 
    <div class="opener"> 
 
    <h2>List (//click)</h2> 
 
    <div id="oo"> 
 
     <input type="checkbox" /><span>List item 1</span> 
 
     <br/> 
 
     <input type="checkbox" /><span>List item 2</span> 
 
     <br/> 
 
     <input type="checkbox" /><span>List item 3</span> 
 
     <br/> 
 
    </div> 
 
    </div> 
 
</div>

来源

2016-03-17 Vijju Sena

*我需要在输入文本框中的模式框中显示数据*它显示在输入文本框中 – guradio

@guradio否..追加2个列表..关闭模式框，然后再次点击添加的列表组..然后数据将是显示与背景数据相同，我需要显示输入文本框中的所有数据.. –

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
<style> 


</style> 
<script> 

$(document).ready(function() { 
//to add default list 
addList(); 


    $("#dialogWindow").dialog({ 
    autoOpen: false, 
    }); 
}); 


function addList(){ 

var count = $(".listGroup").children().length; 
var $tempRow = $(".blankListItem").last().clone(); 
$tempRow.attr("class", "listItem"); 
$tempRow.attr('index', count); 
$tempRow.show(); 
$(".listGroup").append($tempRow); 
} 


function addItem(){ 

var text = $("#newCheckText").val(); 
$("#dialogWindow").find("#items").append("<input type='text' value='" + text +"' /> </br>"); 
$("#newCheckText").val("Enter Value"); 
var index = $("#dialogWindow").attr("index"); 
var currentList =$(".listGroup").find(".listItem").eq(parseInt(index)); 
$(currentList).find(".list").append("<input type='checkbox' class='chk1' /> <label class='label1' >" + text +" </label></br>"); 
} 

function openModalWindow(source){ 

var index = $(source).attr('index'); 
var itemCount = $(source).find('input[type="checkbox"]').length; 
$("#dialogWindow").find("#items").empty(); 
for(var i=0; i< itemCount; i++){ 
var text = $(source).find("[class^='label']").eq(i).text(); 
$("#dialogWindow").find("#items").append("<input type='text' value='" + text +"' /> </br>"); 
} 
$("#dialogWindow").attr("index", index); 
$("#dialogWindow").dialog("open"); 
} 

</script> 
</head> 
<body > 

<button id="btnAddList" onclick="addList()">Add List</button> 

<div id="dialogWindow" title="Add List" index="0"> 
    <h2>List items</h2> 
    </br> 

    <div id="items"> 

    </div> 
    <input type="text" id="newCheckText" value="Enter Value" /> 
    <button id="btnAddItem" onclick="addItem()">Add</button> 
</div> 


<div class="listGroup"> 



</div> 

    <div class="blankListItem" style='display:none;' onclick="openModalWindow(this)"> 
    <h2>List (//click)</h2> 
    <div class="list"> 
     <input type="checkbox" class='chk1' index="0"/> <label class='label1' index="0" >List Item 1 </label> 
     <br/> 
     <input type="checkbox" class='chk1'index="1"/> <label class='label1' index="1">List Item 2 </label> 
     <br/> 
     <input type="checkbox" class='chk1' index="2"/> <label class='label1' index="2">List Item 3 </label> 
     <br/> 
    </div> 
    </div> 
</body> 
</html>

来源

2016-03-17 12:00:41

将字段添加到任何一个列表组，然后单击另一个列表组后，该列表组也添加到模态窗口中的当前列表组.. ..你有没有检查过它..你可以再次验证你的代码... –

已编辑的解决方案，请现在检查。 –

终于你做到了..很棒的工作.. :)谢谢:) –

更改开瓶器Click事件代码下面

$(document).on('click', '.opener', function() { 

    $appendItemsToList = $(this); 
    $("#ol").empty(); 
    $appendItemsToList.find('input[type="checkbox"]').each(function(i){ 

     var value = "List Item "+ i; 
     $("#ol").append('<input type="text" value="'+value+'" />'); 
    }); 
    $("#dialog").dialog("open"); 
    });

来源

2016-03-17 08:49:00

thatz确定，但是我从modalbox添加chexkboxes ,,数据不是在背景复选框中添加.. –

@PrasdGuduri如果我使用此代码$ appendItemsToList = $（this）;使用而不是$ appendItemsToList = $（“＃oo”）; itx在你的代码中正好工作 –

，当我试图输入不同的文本，然后添加，如果我回到添加列表中，数据不会显示在列表中。 –

如何将文本添加到输入文本框中的值jquery

回答

相关问题