Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » WordPress » como puedo crear una funcion de select anidados a partir de esta primera

WordPress - como puedo crear una funcion de select anidados a partir de esta primera

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de Orlando
Val: 27
Ha mantenido su posición en WordPress (en relación al último mes)
Gráfica de WordPress

como puedo crear una funcion de select anidados a partir de esta primera

Publicado por Orlando (15 intervenciones) el 19/06/2018 18:51:41
Buenas tardes y gracias de antemano.

¿como puedo crear una funcion de select anidados a partir de esta primera?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
add_action('woocommerce_before_order_notes', 'agrega_mi_campo_personalizado');
 
function agrega_mi_campo_personalizado( $checkout ) {
 
echo '<h2>'.__('SELECCIONA TU REGION Y COMUNA').'</h2>';
woocommerce_form_field( 'variable', array(
'type' => 'select',
'class' => array( 'wps-drop' ),
'label' => __( 'Turno' ),
'options' => array(
'blank'	=> __( 'Elige', 'wps' ),
'morning'	=> __( 'En la mañana', 'wps' ),
'afternoon'	=> __( 'En la tarde', 'wps' ),
'evening' => __( 'En la noche', 'wps' )
)
),	$checkout->get_value( 'valor_region' ));
}

muestro la imagen como debe quedar:
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Alejandro

como puedo crear una funcion de select anidados a partir de esta primera

Publicado por Alejandro (169 intervenciones) el 10/04/2024 21:09:52
Buenas tardes, Orlando.

Para crear una función de select anidados a partir de la primera, puedes utilizar el siguiente código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
add_action('woocommerce_before_order_notes', 'agrega_mi_campo_personalizado');
 
function agrega_mi_campo_personalizado( $checkout ) {
    echo '<h2>'.__('SELECCIONA TU REGION Y COMUNA').'</h2>';
    woocommerce_form_field( 'valor_region', array(
        'type' => 'select',
        'class' => array( 'wps-drop' ),
        'label' => __( 'Turno' ),
        'options' => array(
            'blank'     => __( 'Elige', 'wps' ),
            'morning'   => __( 'En la mañana', 'wps' ),
            'afternoon' => __( 'En la tarde', 'wps' ),
            'evening'   => __( 'En la noche', 'wps' )
        ),
        'custom_attributes' => array(
            'onchange' => 'cargarSelectComuna(this.value);'
        )
    ), $checkout->get_value( 'valor_region' ));
}

En este código, se ha agregado el atributo onchange al primer select para llamar a la función cargarSelectComuna en JavaScript cuando se selecciona una opción.

Luego, en tu archivo JavaScript, puedes tener la función cargarSelectComuna para cargar las opciones del segundo select según la opción seleccionada en el primer select:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function cargarSelectComuna(valor) {
    var arrayValores = {
        'morning': ['Comuna 1', 'Comuna 2', 'Comuna 3'],
        'afternoon': ['Comuna 4', 'Comuna 5', 'Comuna 6'],
        'evening': ['Comuna 7', 'Comuna 8', 'Comuna 9']
    };
 
    var selectComuna = document.getElementById('select_comuna');
    selectComuna.innerHTML = '';
 
    if (valor !== '') {
        for (var i = 0; i < arrayValores[valor].length; i++) {
            var option = document.createElement('option');
            option.value = arrayValores[valor];
            option.text = arrayValores[valor];
            selectComuna.appendChild(option);
        }
        selectComuna.disabled = false;
    } else {
        selectComuna.disabled = true;
    }
}

En esta función, se utiliza un objeto arrayValores para almacenar las opciones del segundo select según la opción seleccionada en el primer select. Luego, se crea dinámicamente las opciones del segundo select (select_comuna) según la opción seleccionada en el primer select.

Recuerda ajustar el ID del segundo select (select_comuna) en el código JavaScript según el ID real de tu segundo [i]select en el formulario.

Espero que esto te ayude a crear una función de [i]select anidados a partir de la primera.

¡Buena suerte!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar