Comment récupérer la valeur d’un select HTML ?

Les formulaires en HTML contiennent plusieurs types de champs, comme des inputs, des boutons radios et des listes déroulantes (select). Dans cet article, nous allons voir comment récupérer la valeur d’un select HTML en JavaScript, ainsi que d’autres champs de formulaire.

Récupérer la valeur d’un select HTML en JavaScript est assez simple. Tout d’abord, nous devons récupérer l’élément select à l’aide de la méthode document.getElementById(). Ensuite, nous pouvons accéder à la propriété value de l’élément pour récupérer la valeur sélectionnée. Voici un exemple de code :

« `javascript

let selectElement = document.getElementById(‘mon-select’);

let selectedValue = selectElement.value;

« `

Cela récupère la valeur sélectionnée dans un select HTML avec l’id « mon-select ». Si vous souhaitez récupérer l’option sélectionnée elle-même, plutôt que sa valeur, vous pouvez utiliser la propriété selectedIndex de l’élément select ainsi que la méthode options pour accéder à l’option sélectionnée :

« `javascript

let selectElement = document.getElementById(‘mon-select’);

let selectedOption = selectElement.options[selectElement.selectedIndex];

« `

Pour récupérer la valeur d’un input en JavaScript, nous pouvons également utiliser la méthode document.getElementById() pour récupérer l’élément input, puis accéder à sa propriété value. Voici un exemple de code :

« `javascript

let inputElement = document.getElementById(‘mon-input’);

let inputValue = inputElement.value;

« `

Comment faire une liste déroulante en JavaScript ?

Pour créer une liste déroulante en JavaScript, nous pouvons créer un élément select à l’aide de la méthode document.createElement(), puis ajouter des options à l’élément select à l’aide de la méthode appendChild(). Voici un exemple de code :

« `javascript

let selectElement = document.createElement(‘select’);

let optionElement1 = document.createElement(‘option’);

optionElement1.value = ‘valeur1’;

optionElement1.textContent = ‘Option 1’;

selectElement.appendChild(optionElement1);

let optionElement2 = document.createElement(‘option’);

optionElement2.value = ‘valeur2’;

optionElement2.textContent = ‘Option 2’;

selectElement.appendChild(optionElement2);

// Ajoute l’élément select au DOM

document.body.appendChild(selectElement);

« `

Comment afficher une valeur dans un input ?

« `javascript

let inputElement = document.getElementById(‘mon-input’);

inputElement.value = ‘Ma valeur’;

« `

Comment récupérer la valeur d’un bouton radio en JavaScript ?

Pour récupérer la valeur d’un bouton radio en JavaScript, nous devons d’abord récupérer tous les boutons radio du même nom de groupe, puis parcourir chaque bouton pour trouver celui qui est sélectionné. Voici un exemple de code :

« `javascript

let radioButtons = document.getElementsByName(‘mon-groupe-radio’);

for (let i = 0; i < radioButtons.length; i++) {

if (radioButtons[i].checked) {

let selectedValue = radioButtons[i].value;

break;

}

}

« `

Comment récupérer la valeur d’un input en Angular ?

En Angular, nous pouvons récupérer la valeur d’un input en utilisant la directive ngModel. Tout d’abord, nous devons lier la valeur de l’input à une propriété de notre composant à l’aide de [(ngModel)] :

« `html

« `

« `typescript

let inputValue = this.maValeur;

« `

Cela récupère la valeur saisie dans l’input lié à la propriété « maValeur » de notre composant.