Question

在下面的代码中，我有附加的组列表，如果我点击任何组，将打开一个模型框。我需要编辑文本框中的值列表..如果我点击任何组我的代码..数据在模态框中显示相同..但我需要在输入文本框中的模态框中显示数据..

$(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>

Answer 1

将开启者点击事件代码更改为

  $(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"); 
  });

Answer 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>

如何将文本捕获到输入文本框值jquery中

2 个答案: