Cómo llenar menús desplegables usando JavaScript?

En este artículo, vamos a aprender cómo llenar menús desplegables a través de JavaScript ?

En primer lugar, vamos a crear un nombre de documento html dropdown.html y añadiendo nuestros dropdown.js JavaScript nombres se crean utilizando la etiqueta script como & lt; script src = “dropdown.js” & gt; & lt; / la escritura de & gt; .

Entonces, creamos dos menús desplegables mediante el uso de etiquetas select con id st y ct y añadimos un evento onchange en el primer desplegable. De manera que el estado class desplegable se llenará de los estados dados.

Ahora , en el archivo JavaScript hacemos cuatro funciones addElements , removeElements para sumar y Opciones Sacar de seleccione la etiqueta y el fillState , fillCity de llenan los datos en menús desplegables por su id ( s) , la cual obtenemos llamando document.getElementById () método.

JavaScript (dropdown.js)

// addElements function to add elements as options
function addElements(dd,array)
{ for(i=0;i<array.length;i++)
{
var opt=document.createElement('option');
opt.text=array[i];
opt.value=array[i];
dd.add(opt);
}
}
// removeElements function to remove elements in dropdown city while changing the states
function removeElements(dd)
{ for(i=dd.options.length-1;i>=0;i--)
{
dd.remove(i);
}
}
// function to fill states
function fillState()
{
var state=["-Select-","Madhya Pradesh","Haryana","Gujrat","Himachal"];
var st=document.getElementById("st");
addElements(st,state);
}
// functions to fill city dropdown after changing the state values
function fillCity()
{
var st=document.getElementById("st");
var ct=document.getElementById("ct");
var i=st.selectedIndex;
removeElements(ct);
//switch cases according to the state values
switch(i)
{
case 1:
var mp=["-Select-","Gwalior","Bhopal","Indore","Ujjain"];
addElements(ct,mp);
break;
case 2:
var hr=["-Select-","Rohtak","Faridabad","Sonipat","Panipat"];
addElements(ct,hr);
break;
case 3:
var gj=["-Select-","Ahemdabad","Surat","Gandhinagar","Rajkot"];
addElements(ct,gj);
break;
case 4:
var hp=["-Select-","Dharamshala","Shimla","kasauli","Nahan"];
addElements(ct,hp);
break;
}
}

HTML Código

<html>
<head>
<title>
Example of dropdown filling
</title>
<script src="dropdown.js"></script>
</head>
<body onload="fillState();">
<select id="st" onchange="fillCity();"></select>
<br><br>
<select id="ct">
<option>-City-</option>
</select>
</body>
</html>

salida

How to fill dropdowns using JavaScript? - 4


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *