Заполните форму данными из ассоциативного массива с помощью jQuery

Question

В прошлый раз Я спросил об обратном процессе и получил несколько очень эффективных ответов. Я стремлюсь к минимуму строк кода здесь. У меня есть форма полей и ассоциативный массив в формате {fieldname: data}, я хочу заполнить им соответствующую форму.

Answer 1

Если для элементов формы их идентификатор установлен на имя поля:

$.each(myAssocArry, function(i,val) { $('#'+i).val(val); });

Answer 2

Когда я сделал это для проекта, я обнаружил, что установка значений полей выбора, переключателей и флажков требует более сложного кода, что-то вроде:

jQuery.each(data, function (name,value) {
  jQuery("input[name='"+name+"'],select[name='"+name+"']").each(function() {
    switch (this.nodeName.toLowerCase()) {
        case "input":
            switch (this.type) {
                case "radio":
                case "checkbox":
                    if (this.value==value) { jQuery(this).click(); }
                    break;
                default:
                    jQuery(this).val(value);
                    break;
            }
            break;
        case "select":
            jQuery("option",this).each(function(){
                if (this.value==value) { this.selected=true; }
            });
            break;
    }
  });
});

Я не тестировал этот код, поэтому надеюсь, что нет глупых синтаксических ошибок, которые мне следовало бы обнаружить. Надеюсь, это поможет.

Мне не разрешено комментировать комментарии здесь (пока), так что .... Как отмечено в комментарии, метод jQuery .val (val) обрабатывает установку переключателей, флажков и выбирает.

Вам все равно нужно будет поместить select [name = ...] в шаблон селектора jQuery, иначе элементы select не будут обновлены.

Answer 3

Или аналогично предыдущему предложению, используя имена полей вместо идентификаторов:

$.each(data, function(name,value) {
    $("input[name='" + name + "']").val(value);
});

Answer 4

Я не видел, чтобы дескриптор jQuery передавал единственное (не массив) значение в val () для входа радио или флажка. Вы должны быть уверены, что оберните одно значение в массив.

Я также обычно не хотел изменять значения входов кнопки, поэтому я отфильтровываю их.

Вот функция, которая обрабатывает перенос массива, фильтрацию кнопок, а также ограничивает выбор ввода заданным элементом формы. Параметр формы является необязательным. Если оставить неактивным / неопределенным / неопределенным, будут выбраны все входы на странице.

function populateForm(data, form) {
    $.each( data, function(name, value) {
        var input = $(":input[name='" + name + "']:not(:button,:reset,:submit,:image)", form );
        input.val( ( !$.isArray( value ) && ( input.is(':checkbox') || input.is(':radio') ) ) ? [ value ] : value );
    } );
};