Dado un documento HTML con un menú de lista desplegable, nuestra tarea es agregar más opciones a la lista desplegable usando jQuery.
Enfoque: para agregar más opciones a la lista desplegable existente usando el método append() :
var options = {
val1: 'C#',
val2: 'PHP'
};
var selectOption = $('#programmingLanguage');
$.each(options, function (val, text) {
selectOption.append(
$('<option></option>').val(val).html(text)
);
});
Este es un pequeño fragmento de código que se puede usar para agregar una opción a una lista existente y este fragmento de código se toma de una demostración a continuación donde val1 y val2 tienen los nombres de las opciones , lenguaje de programación es la identificación utilizada para la opción de selección , luego usando el método append() las nuevas opciones se fusionan con la lista existente de opciones.
Puede encontrar una explicación detallada del método append() en JQuery aquí .
A continuación se muestra el código para la demostración del enfoque anterior.
HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js">
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Add an option to the dropdown list using jquery.</title>
</head>
<body>
<h1 style="color: green;">GeeksForGeeks</h1>
<p>Programming Languages :</p>
<select id='programmingLanguage'>
<option value="Java" style="color: green;
font-weight: 700;">Java</option>
<option value="Python" style="color: green;
font-weight: 700;">Python</option>
<option value="CPP" style="color: green;
font-weight: 700;">CPP</option>
<option value="C" style="color: green;
font-weight: 700;">C</option>
</select>
<p> Click to add C# and PHP programming languages</p>
<button onclick="addOption()">Add option</button>
<!--Code to add an option to an existing set of option using jquery-->
<script>
function addOption() {
var options = {
val1: 'C#',
val2: 'PHP'
};
var selectOption = $('#programmingLanguage');
$.each(options, function (val, text) {
selectOption.append(
$('<option></option>').val(val).html(text)
);
});
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sayantanbose2001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA