entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

3votos

Limpiar el select anidado al cambiar de option

hola a todos, tengo el siguiente codigo

<fieldset>
    <div class="form-group">
        <label class="col-sm-3 control-label">Region</label>
    <div class="col-sm-5">
        <select class="populate placeholder" name="region" id="s2_country" onchange="setFilters(this.value)">
                  <option value="0" selected>Select</option>
            <?php 
                             $sql="SELECT * FROM dbo.cat_region WHERE id<>0 order by region";
                               $rs=odbc_exec($connection,$sql);
                              while (odbc_fetch_row($rs))
                         {  echo "<option value='".odbc_result($rs,"code")."'>".odbc_result($rs,"region")."</option>";

                            }
                          ?>            
                </select>
</div>

                            <label class="col-sm-3 control-label">Country</label>
                            <div class="col-sm-5">
                                <select class="populate placeholder" name="country" id="s3_country">
                                    <option value="0" selected>Select</option>

                                </select>
                            </div>

                            <label class="col-sm-3 control-label">Service Area</label>
                            <div class="col-sm-5">
                                <select class="populate placeholder" name="services" id="s1_country" onchange="setFilters1(this.value)">
                                    <option value="0" selected>Select</option>
                                      <?php 
                                                $sql="SELECT * FROM dbo.cat_serviceArea WHERE id<>0 order by areaName";
                                                $rs=odbc_exec($connection,$sql);
                                                while (odbc_fetch_row($rs))
                                                {  echo "<option value='".odbc_result($rs,"code")."'>".odbc_result($rs,"areaName")."</option>";

                                                }
                                      ?>    
                                </select>
                            </div>

                            <label class="col-sm-3 control-label">Domain Service Area</label>
                            <div class="col-sm-5">
                                <select class="populate placeholder" name="domainsa" id="s4_country" onchange="setFilters2()">
                                    <option value="0" selected>Select</option>
                                </select>
                            </div>

                            <label class="col-sm-3 control-label">Technology Type Service</label>
                            <div class="col-sm-5">
                                <select class="populate placeholder" name="technologyts" id="s5_country" onchange="setFilters3()">
                                    <option value="0" selected>Select</option>

                                </select>
                            </div>

                            <label class="col-sm-3 control-label">Technology Type Service Release</label>
                            <div class="col-sm-5">
                                <select class="populate placeholder" name="technologytsr" id="s7_country">
                                    <option value="0" selected>Select</option>
                                </select>
                            </div>
                        </div>
                    </fieldset>

y la funcion js

    function setFilters(region){
            getCountry(region);

        }

        function setFilters1(areaName){
            getDomain(areaName);

        }

        function setFilters2(){
        var a = document.getElementById("s1_country").value;
        var b = document.getElementById("s4_country").value;
        getTechnology(a,b);
        }

        function setFilters3(){
        var c = document.getElementById("s4_country").value; //domain service area
        var d = document.getElementById("s5_country").value; // technology type service
        getTechnologyType(c,d);

        }

    function getCountry(region){

            var params ={
                "REG":region,
                "filterKey": 'COUNTRY'
            };
            $.ajax
            ({
            type: "POST",
            url: "filters.php",
            data: params,
            async: true,
            cache: false,
            success: function(response)
            {   
                $("#s3_country").html(response);
                //alert(response)
            },
            error: function(response){
                $("#s3_country").html("<option value ='0'>Select</option>");
            } 

            });
    }

    function getDomain(service){
            var params ={
                "REG":service,
                "filterKey": 'DOMAIN'
            };
            $.ajax
            ({
            type: "POST",
            url: "filters.php",
            data: params,
            async: true,
            cache: false,
            success: function(response)
            {   
                $("#s4_country").html(response);
                //alert(response)
            },
            error: function(response){
                $("#s4_country").html("<option value ='0'>Select</option>");
            } 

            });
    }

    function getTechnology(servicea,service){
            var params ={
                "SERVICE":servicea,
                "REG":service,
                "filterKey": 'TECHNOLOGY'
            };
            $.ajax
            ({
            type: "POST",
            url: "filters.php",
            data: params,
            async: true,
            cache: false,
            success: function(response)
            {   
                $("#s5_country").html(response);
                //alert(response)
            },
            error: function(response){
                $("#s5_country").html("<option value ='0'>Select</option>");
            } 

            });
    }

    function getTechnologyType(a,b){
            var params ={
                "A":a,
                "REG":b,
                "filterKey": 'TECHNOLOGYTYPE'
            };
            $.ajax
            ({
            type: "POST",
            url: "filters.php",
            data: params,
            async: true,
            cache: false,
            success: function(response)
            {   
                $("#s7_country").html(response);
                //alert(response)
            },
            error: function(response){
                $("#s7_country").html("<option value ='0'>Select</option>");
            } 

            });
    }

el campo region se relaciona con el country
y los otros 3 se relacionan entre si, el problema es que si yo cambio el valor de cualquiera de los select me sigue poniendo la opcion que estaba ligada a la primera que haya puesto,
como puedo hacer para que los limpie siempre que se cambie de alguna opción que no este ligada al siguiente select, no se si me doy a entender, espero que me puedan ayudar.

2 Respuestas

2votos

cobasESP Puntos19650

Hola, crea las select en dos script a parte en los que con un echo devuelvas esto:

<option values="x">x>/option>
<option values="x">x>/option>
<option values="x">x>/option>
etc

Y al hacer la funcion ajax, en el onsuccess haces:

$('myselect').html(""); //para dejarlo en blanco
$('myselect').load("getContenidoSelect.php"); //Llamada al script para poblar la select

Con esto te aseguras que la select se vacia cada vez que se va a llenar, espero que te sirva

0voto

rach comentado

hola @cobasESP gracias por responder, solo no me queda muy claro la primera parte de que cree las select en dos script :( me lo puedes explicar un poco mas por favor?

0voto

cobasESP comentado

Hola, perdón si me e explicado mal, a ver, me referia a que tienes dos archivos, uno es tu pagina web, y el otro es el script que te devuelve las options, solo tienes que llamar desde tu web con el .load(); al archivo que te hace la select y te prepara las <option>.

1voto

Leonardo-Tadei Puntos227320

Hola @rach,

no alcanzo a comprender del todo tu problema...

si lo que querés es dejar sin ningún OPTION a un SELECT, se hace así:

document.getElementById('el_ID_del_select').options.length = 0;

Si lo que querés es que un SELECT con un OPTION elegido vuelva a estar el la primer opción pero sin que se borre el contenido, se hace así:

// Ajustar el selectedIndex a tu SELECT.
document.getElementById('el_ID_del_select').selectedIndex  = 0;

Lo que tal vez tengas que hacer es, al cambiar un valor en el select del que dependen los otros, vaciar todos los dependientes y poner al principio los que no son dependientes...

También es posible que debas limpiar los select dependientes antes de cargarlos con nuevos valores.

Saludos cordiales!

0voto

rach comentado

hola @Leonardo-Tadei gracias por responder, mi select funcionan bien con los valores que les asigne, lo mismo los valores dependientes, el problema es si en dado caso el usuario cambia de opinión y decide poner una opción diferente no limpia los select, es justo lo que dices necesito limpiar los select dependientes antes de cargarlos con nuevos valores pero no se como hacerlo, ojalá me puedan ayudar

0voto

Leonardo-Tadei comentado

@rach, un select se limpia así:

document.getElementById('el_ID_del_select').options.length = 0;

Tenés que agregar esa línea de código (cambiando el_ID_del_select por el valor correcto al principio del código que carga el contenido de los select.

En tu código sería al principio de la función setFilters() que es la que carga los valores.

Tenés que poner una línea de estas para cada SELECT que quieras limpiar.

Cuál es tu duda?

0voto

rach comentado

@Leonardo-Tadei pusé el código de esta manera y no me funciona

function setFilters(region){
            getCountry(region);
            document.getElementById('s3_country').options.length = 0;

        }

pongo region y country y esto esta ok pero si cambio la region el select country sigue poniendo la primera opcion que puse y no lo limpia

0voto

Leonardo-Tadei comentado

Hola @rach,

tenés que limpiar el select antes de volverlo a llenar con el getCountry()

function setFilters(region){
            document.getElementById('s3_country').options.length = 0;
            getCountry(region);
...

después, es un poco de lógica a agregar:

En el onChange de región, limpiar todo.

En el onChange de contry, limpiar todo menos region.

En el onChange de domain service area, limpiar todo menos región y country

y así con todos, dependiendo de la lógica de negocio que tengas.

Saludos cordiales!

0voto

rach comentado

lo pongo tal cual y no lo hace :(

0voto

Leonardo-Tadei comentado

Tenés publicado el sitio funcionando para poder verlo?
O al menos publicar esta pantalla funcinando, ya que al ser JS, no necesitamos el resto del código fuente.

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta