Maison  >  Article  >  interface Web  >  Comment émuler un attribut en lecture seule pour une balise HTML SELECT tout en récupérant les données POST ?

Comment émuler un attribut en lecture seule pour une balise HTML SELECT tout en récupérant les données POST ?

DDD
DDDoriginal
2024-11-13 02:24:01942parcourir

How to Emulate a Readonly Attribute for an HTML SELECT Tag and Still Retrieve POST Data?

Émulation de l'attribut en lecture seule pour la balise HTML SELECT avec récupération de données POST

Selon les spécifications HTML, la balise SELECT n'a pas d'attribut en lecture seule, ce qui nécessite l'utilisation de l'attribut désactivé pour empêcher les modifications apportées aux entrées de l'utilisateur. Cependant, cela pose un problème car les entrées désactivées sont exclues des soumissions de données POST ou GET.

Pour résoudre ce problème, une solution de contournement consiste à conserver l'attribut désactivé pour l'élément SELECT tout en ajoutant une entrée masquée portant le même nom. et valeur.

Solution :

  1. Initialisez l'élément SELECT comme désactivé.
  2. Ajoutez une entrée masquée avec le même nom et la même valeur que l'élément SELECT.
  3. Si l'élément SELECT est réactivé, transférez sa valeur vers l'entrée masquée à l'aide d'un événement onchange. Par la suite, désactivez ou supprimez l'entrée masquée.

Mise en œuvre :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <form>

Explication du code :

  • Le formulaire contient un élément SELECT désactivé et une entrée masquée pour la sélection d'animaux.
  • Lorsque vous cliquez sur le bouton "Activer", l'élément SELECT est activé et son nom est défini sur "animal". L'entrée masquée est désactivée pour éviter la soumission en double.
  • Un événement onchange transfère la valeur de l'élément SELECT mise à jour vers l'entrée masquée lorsqu'il est réactivé.
  • La soumission du formulaire affiche les données du formulaire soumises, qui incluent à la fois la sélection de couleurs du deuxième élément SELECT et la sélection d'animaux de l'entrée cachée.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn