Question

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.

Answer 1

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

Answer 2

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!