Question

我在html中有一个表单，我需要为表单中的所有元素设置值。

我有一个像这样的对象，包含所有字段和值的名称： -

obj= {  
   name:'john',
   age:10,
   Country:'USA'
}

有没有办法直接使用jquery或没有太多代码的东西设置值，而不是访问表单的每个元素并设置值？

最简单的方法是什么？

Answer 1

Object.keys(obj).forEach(key => {
    $(`input[name="${key}"]`).val(obj[key]);
})

循环遍历每个对象属性，使用与对象属性键相同的名称查找输入，并将其值设置为属性值

https://jsfiddle.net/53kjnunj/

Answer 2

以下是从对象到表单元素设置数据的代码

function loadFormElements(form, data ) {
    $.each(data, function(index, value) {
        var element = $(form).find("input[name='" + index + "']");

        if( $(element).is(":checkbox") ) {
            if( value == "Y" ) {
                $(element).prop('checked',value == "Y" );
            } else {
                $(element).removeProp('checked' );
            }
        } else {
            element.val(value);
        }
    });
}

请按以下方式调用上述方法

  loadFormElements( $("#myform"),obj);

Answer 3

你可以在没有jQuery的情况下这样做：

    <form>
      <input type="text" id="name">
      <input type="text" id="age">
      <input type="text" id="country">
    </form>

JS：

obj= {  
   name:'john',
   age:10,
   Country:'USA'
}

document.getElementById('name').value = obj.name;
document.getElementById('age').value = obj.age;
document.getElementById('country').value = obj.Country;

https://jsfiddle.net/292bcxux/

设置对象中所有表单元素的值

3 个答案: