Como anidar un select en una funcion
Publicado por Orlando (15 intervenciones) el 19/06/2018 04:04:07
Buen día grupo.
Tengo la siguiente función php en el archivo function.php.
Es un select, al seleccionar la primera opcion : En la mañana, quisiera que en el siguiente combo me traiga
automaticamente la opcion de : Me cepillo, desayuno y si selecciono la otra opcion En la tarde me traiga
automaticamente la opcion de : Tomo la siesta, almuerzo y si tomo la otra ocion de En la noche me traiga
la otra opcion de: Duermo, ceno. Es un combo anidado. Como pueden ver lo tengo en php con javascript pero no se hacerlo en el programa function.php, mas abajo muestro el codigo en php y javascrit.
Muchas gracias de antemano.
Aqui corre excelente, pero no se correrlo no armarlo en function.php
Al dar clic en la primera, se depliega esta segunda en javascript:
Tengo la siguiente función php en el archivo function.php.
Es un select, al seleccionar la primera opcion : En la mañana, quisiera que en el siguiente combo me traiga
automaticamente la opcion de : Me cepillo, desayuno y si selecciono la otra opcion En la tarde me traiga
automaticamente la opcion de : Tomo la siesta, almuerzo y si tomo la otra ocion de En la noche me traiga
la otra opcion de: Duermo, ceno. Es un combo anidado. Como pueden ver lo tengo en php con javascript pero no se hacerlo en el programa function.php, mas abajo muestro el codigo en php y javascrit.
Muchas gracias de antemano.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?php
/**
* Añade el campo REGION a la página de checkout de WooCommerce
*/
add_action('woocommerce_before_order_notes', 'agrega_mi_campo_personalizado');
function agrega_mi_campo_personalizado( $checkout ) {
echo '<h2>'.__('INDICA QUE HACES EN CADA MOMENTO DEL DIA').'</h2>';
woocommerce_form_field( 'accion', array(
'type' => 'select',
'class' => array( 'wps-drop' ),
'label' => __( 'Opcion a escoger' ),
'options' => array(
'blank' => __( 'Selecciona tu opcion', 'wps' ),
'morning' => __( 'En la mañana', 'wps' ),
'afternoon' => __( 'En la tarde', 'wps' ),
'evening' => __( 'En la noche', 'wps' )
)
), $checkout->get_value( 'accion' ));
}
/**
* Actualiza la información del pedido con el nuevo campo
*/
add_action( 'woocommerce_checkout_update_order_meta', 'actualizar_info_pedido_con_nuevo_campo' );
function actualizar_info_pedido_con_nuevo_campo( $order_id ) {
if ( ! empty( $_POST['accion'] ) ) {
update_post_meta( $order_id, 'ACCION', sanitize_text_field( $_POST['accion'] ) );
}
}
?>
Aqui corre excelente, pero no se correrlo no armarlo en function.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
echo
'
<meta charset="utf-8">
<script src="comuna.js"></script>
<p>
<select id="select1" onchange="cargarSelect2(this.value);">
<option value="0">Selecciona tu opcion</option>
<option value="1">En la mañana</option>
<option value="2">En la tarde</option>
<option value="3">En la noche</option>
</select>
</p>
<p>
<select id="select2" onchange="seleccinado_select2();" disabled>
<option value="0">Elige</option>
</select>
</p>
';
Al dar clic en la primera, se depliega esta segunda en javascript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
function cargarSelect2(valor)
{
var arrayValores=new Array(
new Array(1,1,"Me cepillo"),
new Array(1,2,"desayuno"),
new Array(2,1,"Tomo la siesta"),
new Array(2,2,"almuerzo"),
new Array(3,1,"Duermo"),
new Array(3,2,"ceno")
);
if(valor==0)
{
// desactivamos el segundo select
document.getElementById("select2").disabled=true;
}else{
// eliminamos todos los posibles valores que contenga el select2
document.getElementById("select2").options.length=0;
// añadimos los nuevos valores al select2
document.getElementById("select2").options[0]=new Option("Elige una ", "0");
for(i=0;i<arrayValores.length;i++)
{
// unicamente añadimos las opciones que pertenecen al id seleccionado
// del primer select
if(arrayValores[i][0]==valor)
{
document.getElementById("select2").options[document.getElementById("select2").options.length]=new Option(arrayValores[i][2], arrayValores[i][1]);
}
}
// habilitamos el segundo select
document.getElementById("select2").disabled=false;
}
}
Valora esta pregunta
0