selects anidados recargando la pagina

[Gerardo12]

buenas a todos, tenga un problema con mi pagina de hecho estoy trabajando con php y no deseo conectar con base de datos y mucho menos utilizar javascripr, la verdad tengo problemas con javascript no le entiendo del todo.

el problema que tengo es que son cuatro selects anidados y al escojer una opcion con un boton de continuar le digo que me cargue el siguiente select y si lo ahce pero me carga toda la pagina perdiendome la opcion seleccionada anteriormente, como puedo ahcerle para que no se elimine la opcion anteriormente seleccionada, e investigado en internet y me dicen que utiice un iframe pero no entiendo bien como emplearlos.

mi codigo es el siguiente:

//primer selector (master_dropdown)
$form['master_dropdown'] = array(
'#type' => 'select',
'#title' => 'Primer selector',
'#options' => $initial_options,
'#default_value' => $master_SEGUNDA,
'#attributes' => array('class' => 'master-dropdown'),
);
//boton de continuar para enlasar al segundo selector
$form['continue_to_dependent_dropdown'] = array(
'#type' => 'submit',
'#value' => t('Continuar'),
'#attributes' => array('class' => 'next-button'),
'#submit' => array('ahah_example_dropdown_continue'),
);


//creacion del formulario checbox de la segunda seleccion
$form['segunda_dropdown_holder'] = array(
'#type' => 'select',
'#title' => t('Segunda selección'),
'#options' => get_second_dropdown_options($master_SEGUNDA),
'#attributes' => array('class' => 'segunda_dropdown_holder'),
);
//boton de enlace para la tercera seleccion
$form['continue_to_dependent_dropdown_tercera'] = array(
'#type' => 'submit',
'#value' => t('Continuar'),
'#attributes' => array('class' => 'next-button'),
'#submit' => array('tercera_dropdown_continue'),
);


//creacion del tercer formulario de checbox
$form['tercera_dropdown_holder'] = array(
'#type' => 'select',
'#title' => t('Tercera selección'),
'#options' => get_tercera_options($master_TERCERA),
'#attributes' => array('class' => 'tercera_dropdown_holder'),
);
//boton de enlace para la tercera seleccion
$form['continue_to_dependent_dropdown_cuarta'] = array(
'#type' => 'submit',
'#value' => t('Continuar 3'),
'#attributes' => array('class' => 'next-button'),
'#submit' => array('cuarto_dropdown_continue'),
);


por favor alguien podria decirme si puedo emplear algo solo para que se regargue el siguiente select o combox y no toda la pagina en si de antemano muchisimas gracias.,

[GatorV]

Pues sin usar Javascript es complicado ya que todos los ejemplos de selects anidados se hacen con Javascript y usando AJAX para así evitar tener que volver a cargar la pagina.

Si no quieres usar estos dos, va a ser complicado que puedas manejar todo el estado de tus selects, así que te recomiendo que estudies un poco de Javascript, y AJAX, no es algo muy complicado y va a hacer el flujo de tu pagina mucho más simple.

Saludos.

[Gerardo12]

he estado buscando en la web varias opciones de como se hace y la neta tienes razon todas en¡mplean javascript pero el rpoblema que encuentro en esos codigos, es uqe emplean html, se me paso comentar que igual soy inexperto en php apenas estoy comensando y no se como pasar de html a php
el codigo que encuentro es el sigueinte en html

<p>
<span>Area</span>
<select id="select1">
<option value=""></option>
</select>
</p>
<p>
<span>Area dos</span>
<select id="select2">
<option value=""></option>
</select>
</p>
<p>
<span>Area tres</span>
<select id="select3">
<option value=""></option>
</select>
</p>
<p>
<span>Area cuatro</span>
<select id="select4">
<option value=""></option>
</select>
</p>

entonces el problema que encuentro o bueno no se como resolverlo es el id en que parte del codigo en php se ingresa, ya que dentro del primer select tengo que escojer por ais decirlo select 1 en el primer combox, peor no se como colocarlo en php podras ayudarme en eso.

y gracias por la pronta respeusta

[GatorV]

Entiendo que seas nuevo, y primero tienes que entender que PHP != HTML, PHP es un lenguaje que corre en el servidor y este genera una salida, es decir el diagrama de proceso es:

- Envio de datos por parte del cliente al servidor
- Servidor detecta que es un script PHP
- Invoca al parser de PHP, ejecuta el script y este devuelve algo
- Servidor envía la respuesta al cliente

Ahora la respuesta que PHP genera puede ser lo que sea, texto, HTML, inclusive contenido binario como imágenes, o vídeos.

Entendiendo eso, puedes ver como para atacar tu problema tienes que hacer dos partes por separado, la primera es tu formulario HTML con Javascript, este debe de ser algo muy independiente a lo del servidor.

Primero estudia y entiende como sirve HTML, como sirven los formularios que es lo que envían al servidor (pares de llaves nombre/valor). Luego ve como se diseñan los selects, con tags <select> cada uno necesita un name que es valor que el servidor recibe.

Ahora integra el Javascript, para accesar a un elemento de tu DOM (HTML) cada select necesita un id, con javascript capturas el evento onChange, y usando AJAX, haces una petición HTTP al servidor (aqui es donde entra PHP), el servidor te contesta con algo, y usas javascript para inyectar la respuesta de forma dinámica al select de regreso.

Lo más común y sencillo creo yo es interactuar con JSON, es decir, el servidor te contesta en un JSON que puedes manipular de forma nativa desde Javascript, puedes usar jQuery creo es lo más sencillo para interactuar, te dejo un ejemplo muy simple para que veas como funciona:

Código HTML:

<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    </head>
    <body>
        <form>
            <select name="select1" id="select1"></select>
            <input type="button" name="fillOptions" id="fillOptions" value="Obtener Opciones">
        </form>
        
        <script type="text/javascript">
            $(document).ready(function() {
                $('#fillOptions').click(function() { // Aqui usamos el mismo ID del boton
                    $.getJSON('getjson.php', function(json) {
                        $.each(json, function(key, entry) {
                            $('#select1').append($("<option></option>").attr('value', entry.value).text(entry.text)); 
                        });
                    });
                });
            });
        </script>
    </body>
</html>
 

Ahora eso es puro HTML / Javascript, ahora necesitas un archivo PHP (getjson.php) que es lo que el servidor va a responder (en este caso un archivo JSON) un ejemplo:

Código PHP:

<?php
 
$options = array(
    array(
        'value' => 'valor1',
        'text' => 'El texto del valor1'
    ),
    array(
        'value' => 'valor2',
        'text' => 'El texto del valor2'
    ),
    array(
        'value' => 'valor3',
        'text' => 'El texto del valor3'
    ),
    array(
        'value' => 'valor4',
        'text' => 'El texto del valor4'
    ),
    array(
        'value' => 'valor5',
        'text' => 'El texto del valor5'
    ),
);
 
header('Content-type: text/json');
echo json_encode($options);
 

Si ves ese archivo PHP solamente contesta un array JSON que es el que manipulas desde Javascript para llenar el select.

Con este pequeño ejemplo puedes ampliarlo para hacer selects dependientes, solo es enviar el valor del select a tu archivo PHP, y regresar otro JSON con las opciones necesarias para llenar el select que necesites, revisa la documentación de la librería jQuery para envío de valores: $.getJSON.

Saludos.

[Gerardo12]

muchisimas gracias por la respuesta, pero me han pedido que trabaje con solamente php y bueno eso es lo que queria hacer pero entiendo que es complicado usar solo php, ahora bien toda la información que encuentro en la web es referente a html y javascript, lo que pasa es que quiero utilizar solo php y javascript sin utilizar nada absolutamente nada de html, los ejemplos encontrados hacen esactamente lo que quiero, por eyo es mi pregunta, anterior de como modificar html y poder usarlo como php

Código HTML:

<p>   
   <span>Area</span>
   <select id="select1">
   <option value=""></option>
   </select>
</p> 

Código PHP:

  $form['areasge'] = array( 
'#description' => "Selecciona el área correspondiente",
'#default_value' => $id['select1'],
'#title' => "Área General",
'#options'=> array (""),
'#type'=>'select',            
); 
   

en esta ocasion la pregunta es como modificar o una forma para que en php al yo seleccionar por asid ecir "select1", lo mismo pueda aser en php, teniendo en cuenta que el select es solo un ID, que me lleva a mis opciones que quiero mostrar.

[Triby]

Iniciado por Gerardo12

quiero utilizar solo php y javascript sin utilizar nada absolutamente nada de html

Eso es ilógico, cómo vas a armar elementos de HTML sin usar HTML?

El ejemplo que pones es algo así como "el esqueleto" de un select, pero necesariamente deberás "interpretarlo y convertirlo" a HTML que es lo que entienden los navegadores para mostrar las páginas.

[GatorV]

Exacto, no puedes hacer esto sin HTML, vaya ni si quiera sin Javascript (sí es posible pero te va a quedar muy complicado y enredado), pero al menos el HTML es necesario.

El lado de PHP ya te expliqué que tienes que hacer, es solamente contestar y generar el código adecuado, si no sabes como leer las variables en tu PHP es simple: http://www.php.net/variables.external

Si te pidieron no usar HTML, pues dudo mucho que puedas hacer un select, ya que necesitas usar HTML para ello.

Saludos.