La tarea es agregar elementos al elemento seleccionado de la array de JavaScript. También podemos obtener el valor seleccionado en la lista desplegable usando JavaScript . Aquí completaremos la lista desplegable con una array. A continuación se muestra la descripción de los enfoques populares utilizados en JavaScript.
Ejemplo 1: en este ejemplo, la propiedad de longitud se usa para recorrer los elementos de la array y en cada elemento crear un elemento de opción y agregar este nuevo elemento al elemento de selección mediante el método appendChild() .
- Programa:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Populate dropdown list
with array values
</title>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p id="geeks" style=
"font-size:20px; font-weight:bold">
</p>
<select id="arr"></select>
<br><br>
<button onclick="GFG_Fun();">
click here
</button>
<p id="gfg" style="font-size: 26px;
font-weight: bold;color: green;">
</p>
<script>
var up = document.getElementById('geeks');
var down = document.getElementById('gfg');
var select = document.getElementById("arr");
var elmts = ["HTML", "CSS", "JS", "PHP", "jQuery"];
up.innerHTML = "Click on the button to "
+ "perform the operation"+
".<br>Array - [" + elmts + "]";
// Main function
function GFG_Fun() {
for (var i = 0; i < elmts.length; i++) {
var optn = elmts[i];
var el = document.createElement("option");
el.textContent = optn;
el.value = optn;
select.appendChild(el);
}
down.innerHTML = "Elements Added";
}
</script>
</body>
</html>
- Producción:
Ejemplo 2: En este ejemplo, el método each() se usa para recorrer los elementos de la array y en cada elemento crear un elemento de opción y agregar este nuevo elemento al elemento de selección mediante el método append() en JQuery.
- Programa:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Populate dropdown list
with array values
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p id="geeks" style=
"font-size: 20px;font-weight: bold">
</p>
<select id="arr"></select>
<br><br>
<button onclick="GFG_Fun();">
click here
</button>
<p id="gfg" style="font-size: 26px;
font-weight: bold; color: green;">
</p>
<script>
var up = document.getElementById('geeks');
var down = document.getElementById('gfg');
var select = document.getElementById("arr");
var elmts = ["HTML", "CSS", "JS", "PHP", "jQuery"];
up.innerHTML = "Click on the button to "
+ "perform the operation"+
".<br>Array - [" + elmts + "]";
// Main function
function GFG_Fun() {
$.each(elmts, function(i, p) {
$('#arr').append($('<option></option>')
.val(p).html(p));
});
down.innerHTML = "Elements Added";
}
</script>
</body>
</html>
- Producción:
JavaScript es mejor conocido por el desarrollo de páginas web, pero también se usa en una variedad de entornos que no son de navegador. Puede aprender JavaScript desde cero siguiendo este tutorial de JavaScript y ejemplos de JavaScript.
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA