Question

我使用此FIDDLE来复制文本字段。现在我将使用所有文本字段的结果形成JSON。在我的更新页面中，我需要提取JSON并将完全相同的JSON格式填充到各自的字段中。

$(function() {
        var scntDiv = $('#p_scents');
        var i = $('#p_scents p').size() + 1;

        $('#addScnt').live('click', function() {
                $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
                i++;
                return false;
        });

        $('#remScnt').live('click', function() { 
                if( i > 2 ) {
                        $(this).parents('p').remove();
                        i--;
                }
                return false;
        });
});

HTML

<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>

<div id="p_scents">
    <p>
        <label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /></label>
    </p>
</div>

JSON格式的形式。

{"welcomeList":["Thanks for coming","Please select from the following list"],"endList":["Press come again","Press 0"]}

我的问题是如何填充字段，因为我不熟悉处理这种情况

Answer 1

给出以下JSON

var json = {
       "welcomeList": ["Thanks for coming", "Please select from the following list", "dwadwadsds"],
       "endList": ["Press come again", "Press 0"]
};

使用此脚本，您可以遍历 welcomeList 的每个值并创建input

$.each(json.welcomeList, function (_, vv) {
    $('#p_scents > p:first-child').clone().find('input').val(vv).end().append('<a href="#" id="remScnt">Remove</a>').appendTo('#p_scents');
});

FIDDLE：http://jsfiddle.net/Spokey/tZPg4/11004/

以下说明

$.each(json.welcomeList, function (_, vv) {
     $('#p_scents > p:first-child').clone() 
// make a duplicate of the first <p>
// find the input and change its value, .end() will go back to the <p> selector
                                   .find('input').val(vv).end() 
// append the remove button to the <p>
                                   .append('<a href="#" id="remScnt">Remove</a>')
// append the whole <p> to the <div>                                   
                                   .appendTo('#p_scents');
});

编辑：更具体的用途。我还把ID改为了。

$.each(json.welcomeList, function (_, vv) {
     $('<p><label for="p_scnts"><input type="text" class=cnt" size="20" name="p_scnt" value="' + vv + '"placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo('#p_scents');
});

http://jsfiddle.net/Spokey/tZPg4/11006/

使用JSON中的所有值获取警报

alert(json.welcomeList.join(','));

如何从JSON中提取文本并填充文本字段？

1 个答案: