使用jQuery和JSON填充表单？

Question

我想知道如何使用JSON填充表单是否可行？

我有一个JSON字符串,我使用PHP的json_encode() 和我想使用JSON字符串来填充表单控件(如textarea或文本输入).

如何在不使用外部插件的情况下实现这样的功能(比如我看到的jQuery populate插件).

编辑:JSON格式:

[{"id":"41","parent_id":null,"node_name":"name","slug":"","lft":"3","rgt":"4"}]

这是我从json_encode()得到的

Answer 1

这里有一个问题textarea,然后我将其更改为default开关值

使用此选项可将值分配给多个控件:

function populate(frm, data) {   
    $.each(data, function(key, value) {  
        var ctrl = $('[name='+key+']', frm);  
        switch(ctrl.prop("type")) { 
            case "radio": case "checkbox":   
                ctrl.each(function() {
                    if($(this).attr('value') == value) $(this).attr("checked",value);
                });   
                break;  
            default:
                ctrl.val(value); 
        }  
    });  
}

Answer 2

对于文本控件(即没有收音机或复选框),您可以创建一个简单版本的填充函数:

function populate(frm, data) {
  $.each(data, function(key, value){
    $('[name='+key+']', frm).val(value);
  });
}

用法示例:

populate('#MyForm', $.parseJSON(data));

演示:http://jsfiddle.net/Guffa/65QB3/3/

Answer 3

谢谢Nowshath.它对我有用.我在您的版本中添加了额外的检查,以便能够填充选择选项.

function populateForm(frm, data) {   
$.each(data, function(key, value){  
    var $ctrl = $('[name='+key+']', frm); 
    if($ctrl.is('select')){
        $("option",$ctrl).each(function(){
            if (this.value==value) { this.selected=true; }
        });
    }
    else {
        switch($ctrl.attr("type"))  
        {  
            case "text" :   case "hidden":  case "textarea":  
                $ctrl.val(value);   
                break;   
            case "radio" : case "checkbox":   
                $ctrl.each(function(){
                   if($(this).attr('value') == value) {  $(this).attr("checked",value); } });   
                break;
        } 
    } 
});  


}; // end of populateForm() function