Il s'agit actuellement d'un meilleur moyen de sélectionner toutes les options lors de la production de pages sélectionnées/focused_HTML/Xhtml_Web.

Pendant le développement, j'ai rencontré une telle situation de demande, je l'ai donc enregistrée pour référence future

Contexte des exigences

Utilisez le raccourci clavier sur la page pour localiser le mode de paiement boîte de sélection (une liste déroulante) et effectuez une sélection.

Difficultés techniques

Actuellement, les navigateurs ne prennent pas en charge le positionnement de la liste déroulante via le code pour répertorier toutes les options en dessous. Vous ne pouvez cliquer qu'avec la souris. .

Après avoir recherché des informations sur Internet, j'ai trouvé une meilleure façon de les gérer

Utilisez l'attribut size de select et l'attribut position de la disposition de la boîte pour l'implémenter ; . Le code spécifique est le suivant :

Copier le code

Le code est le suivant :

Mode de paiement :

> :relative;padding:1px;">

RMB
USD
Carte de crédit

HKD


Les méthodes d'expansion et de désexpansion sont toutes deux simples :




Copiez le code

Le code est le suivant : function expand(obj){ $(obj).attr("size","10" }

function unexpand(obj){

$(obj ).attr("size","1");

}


Définissez la position de sélection sur absolue afin que cela n'affecte pas la disposition des flux de dom. Définissez ensuite la position de son conteneur sur relative afin que la sélection soit positionnée en fonction de son conteneur.

Ce qui doit être noté ici, c'est que div doit être utilisé comme conteneur de sélection dans l'élément table, car selon la norme CSS du w3c, la définition de position:relative sur les éléments liés à la table n'est pas définie, donc le l'élément sélectionné sous ff se positionnera directement en fonction de l'élément body.

Informations de référence :

http://www.php-insite.com/autoexpand_select.html Visualisez directement le code source de la page
http://bbs.csdn.net/topics /330158935 Faites attention à la réponse de Lingshuo1993

Étiquettes associées：

select 聚焦 choisi

source：php.cn

Article précédent：Introduction comparative à un attribut href de balise et à la production de pages onclick event_HTML/Xhtml_Web Article suivant：Questions sur les attributs personnalisés des balises HTML_HTML/Xhtml_Production de pages Web

Déclaration de ce site Web

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

Derniers articles par auteur

• Qu'est-ce qu'une NullPointerException et comment y remédier ?
  2024-10-22 09:46:29
• De novice à codeur : votre voyage commence par les principes fondamentaux du C
  2024-10-13 13:53:41
• Débloquer le développement Web avec PHP : guide du débutant
  2024-10-12 12:15:51
• Démystifier C : un chemin clair et simple pour les nouveaux programmeurs
  2024-10-11 22:47:31
• Libérez votre potentiel de codage : programmation C pour les débutants absolus
  2024-10-11 19:36:51
• Libérez votre programmeur intérieur : C pour les débutants absolus
  2024-10-11 15:50:41
• Automatisez votre vie avec C : scripts et outils pour les débutants
  2024-10-11 15:07:41
• PHP Made Easy : vos premiers pas dans le développement Web
  2024-10-11 14:21:21
• Construisez n'importe quoi avec Python : un guide du débutant pour libérer votre créativité
  2024-10-11 12:59:11
• La clé du codage : libérer la puissance de Python pour les débutants
  2024-10-11 12:17:31

Derniers numéros

SQL Count() nécessite également 0 Je n'ai qu'une seule table et je veux compter chaque entrée d'une balise qui commence par ...

Depuis 2024-04-06 19:48:53

0

1

449

sql groupby ne fonctionne pas, je veux regrouper par code_branch ->select('a.statusasstatus','b.nameascustomer_name','e.nameasbranch_name','c.nameas...

Depuis 2024-04-06 19:24:49

0

2

488

Une erreur s'est produite lors de la tentative de récupération de la dernière version d'un package à partir de search.maven.org "Erreur : Impossible de récupérer les données du référentiel Maven" lors de la r...

Depuis 2024-04-05 12:11:23

0

1

1471

Modifier le style matSelect lors de l'affichage des options Comment modifier les propriétés de mat-select lorsque l'option est activée ? <mat-selec...

Depuis 2024-04-05 09:23:19

0

1

1374

Écho à l'intérieur d'un div avec écho imbriqué J'essaie d'utiliser echo<?phprequire'connect.php';$query=mysqli_query($conn,"SELEC...

Depuis 2024-04-04 11:09:23

0

1

390

Rubriques connexes

Plus>

• Techniques couramment utilisées par les robots d'exploration Web
• Comment effacer le flotteur en CSS
• Quels sont les composants de base d'un ordinateur ?
• Excel génère un code QR
• La relation entre la bande passante et la vitesse du réseau
• Résumé du plug-in du navigateur Firefox
• Quel système oa est le meilleur ?
• drivermanager.getconnection

Recommandations populaires

• Que signifie l'URL ?
• Que signifie DOM ?
• Comment changer la taille de l'image
• Comment mettre la police en gras en HTML
• Comment définir la taille des images HTML

Tutoriels populaires

Plus>

Tutoriels associés

Recommandations populaires

Derniers cours

• 
  Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)

  1424826
• 
  Premier tutoriel d'introduction à PHP : Apprenez PHP en une semaine

  4271122
• 
  Tutoriel vidéo JAVA pour débutants

  2551119
• 
  Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle

  508402
• 
  Tutoriel d'introduction PHP base zéro

  863936

• 
  Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)

  1424826 temps d'étude
• 
  Tutoriel vidéo JAVA pour débutants

  2551119 temps d'étude
• 
  Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle

  508402 temps d'étude
• 
  Introduction rapide au développement web front-end

  216011 temps d'étude
• 
  Maîtrisez les didacticiels vidéo PS à partir de zéro

  893545 temps d'étude

• 
  [Web front-end] Démarrage rapide de Node.js

  7734 temps d'étude
• 
  Collection complète de cours full-stack de développement Web étranger

  6193 temps d'étude
• 
  Aller au langage pratique GraphQL

  5099 temps d'étude
• 
  Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape

  706 temps d'étude
• 
  Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures

  25822 temps d'étude

Derniers téléchargements

Plus>

effets Web

Code source du site Web

Matériel du site Web

Modèle frontal

• [bouton de formulaire] Code de contact du formulaire de message d'entreprise jQuery
• [Effets spéciaux du joueur] Effets de lecture de boîte à musique HTML5 MP3
• [Navigation dans les menus] Effets spéciaux du menu de navigation d'animation de particules cool HTML5
• [bouton de formulaire] Code d'édition par glisser-déposer du formulaire visuel jQuery
• [Effets spéciaux du joueur] Code du lecteur de musique Kugou imitation VUE.JS
• [effets spéciaux HTML5] Jeu de boîte de poussée HTML5 classique
• [Effets spéciaux d'image] défilement jQuery pour ajouter ou réduire des effets d'image
• [Effets d'album photo] Effet de zoom de survol de la couverture de l'album personnel CSS3

• [Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure
• [Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches
• [Modèle frontal] Modèle Web de CV de travail créatif de concepteur
• [Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne
• [Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs
• [Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne
• [Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet
• [Modèle frontal] Modèle de site Web de service de trading de devises de style violet

• [Matériau PNG] Matériau vectoriel d'éléments d'été mignons (EPS+PNG)
• [Matériau PNG] Matériel vectoriel de quatre badges de graduation rouges 2023 (AI+EPS+PNG)
• [image de bannière] Oiseau chantant et chariot rempli de fleurs design matériel vectoriel de bannière de printemps (AI + EPS)
• [Matériau PNG] Matériau vectoriel de chapeau de graduation doré (EPS+PNG)
• [Matériau PNG] Matériel vectoriel d'icône de montagne de style noir et blanc (EPS+PNG)
• [Matériau PNG] Matériel vectoriel de silhouette de super-héros (EPS+PNG) avec des capes de couleurs différentes et des poses différentes
• [image de bannière] Matériel vectoriel de bannière Arbor Day de style plat (AI + EPS)
• [Matériau PNG] Matériel vectoriel de neuf bulles de discussion explosives de style bande dessinée (EPS+PNG)

• [Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure
• [Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches
• [Modèle frontal] Modèle Web de CV de travail créatif de concepteur
• [Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne
• [Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs
• [Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne
• [Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet
• [Modèle frontal] Modèle de site Web de service de trading de devises de style violet

Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！

À propos de nous Clause de non-responsabilité Sitemap

© php.cn All rights reserved