如何在现有JavaScript表单脚本中添加带选项的select组件

Got it, let's get that select dropdown integrated into your existing dynamic form setup. Here's a step-by-step breakdown of the changes you need to make:

Step 1: Add Select Configuration to Your Structure Function #

First, update your obtEstructuraRegistro function to include a new entry for the select dropdown. We'll add it as the 6th element in the registro array, complete with option values and display text:

function obtEstructuraRegistro(tablaId) { 
    var registro = new Array(); 
    if(tablaId == "lista_integrantes") { 
        registro[0] = { 
            'elemento': 'input', 
            'type' : 'checkbox', 
            'id' : 'marca', 
            'name' : 'marca' 
        }; 
        registro[1] = { 
            'elemento' : 'input', 
            'type' : 'text', 
            'id' : 'paciente[]', 
            'name' : 'paciente[]', 
            'style' : 'font-size: 11px', 
            'value' : '', 
            'size' : '15', 
            'maxlength' : '20', 
            'class' : 'Fields' 
        }; 
        registro[2] = { 
            'elemento' : 'input', 
            'type' : 'text', 
            'id' : 'cantidad[]', 
            'name' : 'cantidad[]', 
            'style' : 'font-size: 11px', 
            'value' : '', 
            'size' : '7', 
            'maxlength' : '3', 
            'class' : 'Fields' 
        }; 
        registro[3] = { 
            'elemento' : 'textarea', 
            'type' : 'textarea', 
            'id' : 'descripcion[]', 
            'name' : 'descripcion[]', 
            'style' : 'font-size: 11px', 
            'value' : '', 
            'rows' : '3', 
            'cols' : '70', 
            'class' : 'cc' 
        }; 
        registro[4] = { 
            'elemento' : 'input', 
            'type' : 'text', 
            'id' : 'inicial[]', 
            'name' : 'inicial[]', 
            'style' : 'font-size: 11px', 
            'value' : '', 
            'size' : '11', 
            'maxlength' : '11', 
            'placeholder': '$', 
            'class' : 'Fields' 
        }; 
        // New select dropdown configuration
        registro[5] = { 
            'elemento': 'select', 
            'id': 'categoria[]', 
            'name': 'categoria[]', 
            'class': 'Fields', 
            'style': 'font-size: 11px', 
            // Define dropdown options
            'options': [
                { 'value': '', 'text': '-- Seleccione una opción --' },
                { 'value': 'op1', 'text': 'Opción 1' },
                { 'value': 'op2', 'text': 'Opción 2' },
                { 'value': 'op3', 'text': 'Opción 3' }
            ]
        };
        return registro; 
    } 
    return null; 
} 

function obtPropiedadesCampo(tablaId) { 
    if (tablaId == "lista_integrantes") { 
        return {'class': 'celda_normal'}; 
    } 
    return null; 
} 

function obtPropiedadesFila(tablaId) { 
    if (tablaId == "lista_integrantes") { 
        return {} 
    } 
    return null; 
} 

Step 2: Ensure Your DOM Table Script Supports Select Elements #

Your dom_tabla-0.2.js script needs to handle the new select element type. If it doesn't already, add this logic to the part of the script that generates form elements from your configuration:

// Example logic to add to dom_tabla-0.2.js (adapt to match existing code)
function crearElemento(config) {
    let elemento;
    if (config.elemento === 'select') {
        elemento = document.createElement('select');
        // Set standard attributes (skip elemento and options)
        Object.keys(config).forEach(clave => {
            if (clave !== 'elemento' && clave !== 'options') {
                elemento.setAttribute(clave, config[clave]);
            }
        });
        // Add each option to the select
        config.options.forEach(opcion => {
            const opt = document.createElement('option');
            opt.value = opcion.value;
            opt.textContent = opcion.text;
            elemento.appendChild(opt);
        });
    } else {
        // Existing logic for input/textarea elements stays here
        elemento = document.createElement(config.elemento);
        // Set attributes for input/textarea...
    }
    return elemento;
}

Step 3: Update Your Table Header #

Your table currently has 8 <th> elements, but you're now generating 6 form elements. Adjust the header to include a label for your new dropdown (e.g., change one of the placeholder headers like <th>Categoría</th>) to keep the columns aligned.

内容的提问来源于stack exchange，提问作者Jerson Olaya