Skip to content

Instantly share code, notes, and snippets.

@eliezerfot123

eliezerfot123/combox_dependientes.html

Created December 24, 2013 03:19
Show Gist options
  • Save eliezerfot123/8108357 to your computer and use it in GitHub Desktop.
Save eliezerfot123/8108357 to your computer and use it in GitHub Desktop.
Download ZIP
ComboBox dependientes con ajax y html5.
Raw
combox_dependientes.html
<html>
<head>
<title>
COMBOBOX
</title>
<script type="text/javascript">
function cargarSelect2(valor) {
var arrayValores=new Array(
new Array(1,1,"opcion1-1"),
new Array(1,2,"opcion1-2"),
new Array(1,3,"opcion1-3"),
new Array(2,1,"opcion2-1"),
new Array(3,1,"opcion3-1"),
new Array(3,2,"opcion3-2"),
new Array(3,3,"opcion3-3"),
new Array(3,4,"opcion3-4") );
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("Selecciona una opcion", "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;
}
}
/** * Una vez selecciona una valor del segundo selecte, obtenemos la información * de los dos selects y la mostramos */
function seleccinado_select2(value) {
var v1 = document.getElementById("select1");
var valor1 = v1.options[v1.selectedIndex].value;
var text1 = v1.options[v1.selectedIndex].text;
var v2 = document.getElementById("select2");
var valor2 = v2.options[v2.selectedIndex].value;
var text2 = v2.options[v2.selectedIndex].text;
alert("Se ha seleccionado el valor "+valor1+" ("+text1+") del primer select y el valor "+valor2+" ("+text2+") del segundo select");
}
</script>
</head>
<body>
<form>
<p>
<select id='select1' onchange='cargarSelect2(this.value);'>
<option value='0'>Selecciona una opcion</option>
<option value='1'>opcion 1</option>
<option value='2'>opcion 2</option>
<option value='3'>opcion 3</option>
</select>
</p>
<p>
<select id='select2' onchange='seleccinado_select2();' disabled>
<option value='0'>Selecciona una opcion</option>
</select>
</p>
</form>
</body>
</html>
<!-- By Eliezerfot123 - Eliezer Romero - http://fulljed123.wordpress.com -->
@agezew
Copy link

agezew commented Jul 28, 2017

<title> COMBOBOX 
    </title>
    <script type="text/javascript">
        function cargarSelect2(valor) {
             var arrayValores=new Array(
                 new Array(1,1,"W/Arsi"),
                 new Array(1,2,"Jima"),
                 new Array(1,3,"E/Shewa"),

                 new Array(2,1,"Hadiya"),
                  new Array(2,2,"Wolaita sodo"),
                  new Array(2,3,"Gamogofa"),

                 new Array(3,1,"Mekele"),
                 new Array(3,2,"Aksum"),
                 new Array(3,3,"Wukro"),
                     new Array(4,1,"Gojam"),
                     new Array(4,2,"Gondar"),
                     new Array(4,3,"S/shewa"),

                        new Array(5,1,"Asaita"),
                        new Array(5,2,"Semera"),
                        new Array(5,3,"Awash"),

                      new Array(6,1,"Gigjiga"),
                       new Array(6,2,"Ogade"),
                       new Array(6,3,"Kebridar"),

                       new Array(7,1,"Gam1"),
                       new Array(7,2,"G2"),
                       new Array(7,3,"G3"),

                       new Array(8,1,"B1"),
                       new Array(8,2,"B2"),
                       new Array(8,3,"B3"),

                       new Array(9,1,"h1"),
                       new Array(9,2,"h2"),
                        new Array(9,3,"h3") );
             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("Select Zone Option", "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;
            }
        }
        /** * Una vez selecciona una valor del segundo selecte, obtenemos la información * de los dos selects y la mostramos */
        function seleccinado_select2(value) {
            var v1 = document.getElementById("select1");
            var valor1 = v1.options[v1.selectedIndex].value;
            var text1 = v1.options[v1.selectedIndex].text;
            var v2 = document.getElementById("select2");
            var valor2 = v2.options[v2.selectedIndex].value;
            var text2 = v2.options[v2.selectedIndex].text;

            alert("You are Select Region "+valor1+" ("+text1+") And Zone "+valor2+" ("+text2+") then Click Ok");
        }
    </script>
</head>
<body>
    <form>
        <p>
            <select id='select1' onchange='cargarSelect2(this.value);'>
                <option value='0'>Select Region</option>
                <option value='1'>Oromia</option>
                <option value='2'>SNNP</option>
                <option value='3'>Tigray</option>
                      <option value='4'>Amhara</option>
                         <option value='5'>Afar</option>
                            <option value='6'>Ethio somale</option>
                               <option value='7'>Gambela</option>
                                  <option value='8'>Benishangul</option>
                                     <option value='9'>Harari</option>

            </select>
        </p>
        <p>
            <select id='select2' onchange='seleccinado_select2();' disabled>
                <option value='0'>Select Region</option>
            </select>
        </p>
    </form>
</body>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment