jquery ajoute des contrôles subordonnés

Dans le développement front-end, nous devons souvent ajouter divers contrôles à la page. Dans la technologie de développement front-end, jQuery est l'une des bibliothèques js les plus utilisées, avec de nombreux avantages tels que la facilité d'utilisation, la flexibilité et l'évolutivité. Cet article explique principalement comment utiliser jQuery pour ajouter des contrôles subordonnés.

1. Ajouter une zone de liste déroulante

Dans jQuery, vous pouvez facilement créer une zone de liste déroulante via la balise de sélection. Vous pouvez ajouter des options à une sélection en utilisant la méthode append dans jQuery.

Par exemple, le code suivant ajoute un élément option à une zone de liste déroulante avec l'identifiant select via une boucle.

<select id="select">
</select>

<script>
  for (var i = 1; i <= 10; i++) {
    $('#select').append('<option value="' + i + '">选项 ' + i + '</option>');
  }
</script>

Le code ci-dessus ajoutera 10 options à sélectionner, la valeur et le contenu d'affichage de chaque option allant de 1 à 10 respectivement.

2. Ajouter une case à cocher

Vous pouvez utiliser la balise checkbox pour créer facilement des cases à cocher dans jQuery. Vous pouvez ajouter un élément input[type=checkbox] à un conteneur de case à cocher à l'aide de la méthode append dans jQuery.

Par exemple, le code suivant ajoute un élément checkbox à un conteneur avec l'identifiant checkbox-container via une boucle.

<div id="checkbox-container">
</div>

<script>
  for (var i = 1; i <= 5; i++) {
    $('#checkbox-container').append('<input type="checkbox" id="checkbox' + i + '">');
    $('#checkbox-container').append('<label for="checkbox' + i + '">选项' + i + '</label>');
    $('#checkbox-container').append('<br>');
  }
</script>

Le code ci-dessus ajoutera 5 cases à cocher à un conteneur, chaque case à cocher a une étiquette et un saut de ligne correspondants.

3. Ajouter un bouton radio

Vous pouvez utiliser la balise radio pour créer facilement un bouton radio dans jQuery. Vous pouvez ajouter un élément input[type=radio] à un conteneur de boutons radio à l'aide de la méthode append dans jQuery.

Par exemple, le code suivant ajoute un élément radio à un conteneur avec l'identifiant radio-conteneur via une boucle.

<div id="radio-container">
</div>

<script>
  for (var i = 1; i <= 5; i++) {
    $('#radio-container').append('<input type="radio" name="radio" id="radio' + i + '">');
    $('#radio-container').append('<label for="radio' + i + '">选项' + i + '</label>');
    $('#radio-container').append('<br>');
  }
</script>

Le code ci-dessus ajoutera 5 cases de boutons radio à un conteneur, chaque case de boutons radio a une étiquette et un saut de ligne correspondants. Il convient de noter que pour les boîtes à boutons radio, leurs attributs de nom doivent être définis sur la même valeur afin que le système puisse déterminer si elles appartiennent au même groupe.

4. Ajouter des zones de saisie

Vous pouvez utiliser la balise d'entrée dans jQuery pour créer facilement diverses zones de saisie. Vous pouvez ajouter des éléments d'entrée au conteneur de la zone de saisie à l'aide de la méthode append dans jQuery.

Par exemple, le code suivant ajoute des éléments input[type=text] et textarea à un conteneur avec l'identifiant input-container via une boucle.

<div id="input-container">
</div>

<script>
  $('#input-container').append('<input type="text" id="input1">');
  $('#input-container').append('<br>');
  $('#input-container').append('<textarea id="input2"></textarea>');
  $('#input-container').append('<br>');
</script>

Le code ci-dessus ajoutera une zone de saisie de texte et une zone de saisie de champ de texte à un conteneur.

Résumé

Ce qui précède est une brève introduction à l'utilisation de jQuery pour ajouter des contrôles subordonnés. En étudiant le contenu de cet article, vous pouvez facilement maîtriser comment utiliser jQuery pour étendre les fonctionnalités des pages. Cependant, ce n'est que la pointe de l'iceberg des applications jQuery. Il nous reste encore beaucoup de contenu riche à explorer et à utiliser.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!