Maison interface Web js tutoriel Comment résoudre le problème de superposition d'options de lselect

Comment résoudre le problème de superposition d'options de lselect

Mar 29, 2018 am 09:33 AM
option 如何

Cette fois, je vais vous montrer comment résoudre le problème de superposition d'options de lselect. Quelles sont les précautions pour résoudre le problème de superposition d'options de lselect. Ce qui suit est un cas pratique, jetons un coup d'œil.

L'éditeur, j'utilise layui, et j'ai rencontré un piège dans la zone de sélection. La valeur dans la sélection ne peut pas être effacée, et les options dans la sélection ont un problème de superposition afin de résoudre ce problème. et atteindre ma fonction, j'Après quelques recherches, pour que des amis qui ont les mêmes besoins ne tombent pas dans le piège, j'ai posté mon code source :

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>layui-下拉框联动测试</title>
 <link rel="stylesheet" href="layui/css/layui.css" rel="external nofollow" >
</head>
<body>
<p id="wrap">
 <p class="layui-form" lay-filter="merchantForm">
 <p class="layui-form-item">
 <label class="layui-form-label">选择框</label>
 <p class="layui-input-block">
  <select name="city" lay-verify="required" id="test1" lay-filter="test1">
  <option value="0">时间</option>
  <option value="1">金额</option>
  </select>
 </p>
 </p>
 <p class="layui-form-item">
 <label class="layui-form-label">选择框</label>
 <p class="layui-input-block">
  <select name="city" lay-verify="required" id="test2" lay-filter="test2">
  <option value="">请选择规则名称</option>
  </select>
 </p>
 </p>
</p> 
<button id="btn">确定</button>
</body>
<script src="layui/layui.all.js"></script>
<script src="layui/jquery-1.8.3.min.js"></script>
<script>
//后台传过来的数据
var data=[
 {unitType:0,ruleName:'时间规则11',amount:1100,money:1100},
 {unitType:0,ruleName:'时间规则12',amount:1200,money:1200},
 {unitType:0,ruleName:'时间规则13',amount:1300,money:1300},
 {unitType:1,ruleName:'金额规则21',amount:2100,money:2100},
 {unitType:1,ruleName:'金额规则22',amount:2200,money:2200},
 {unitType:1,ruleName:'金额规则23',amount:2300,money:2300},
];
//初始化默认为时间类型以及对应的时间规则
layui.use('form', function(){
 var form = layui.form;
  $('#test2').html('');
  var html='';
  $.each(data,function(i,e){
   if(e.unitType==0)
    html+=`<option data-type="${e.unitType}">${e.ruleName}</option>`;
  })
  $('#test2').append(html);
  form.render('select'); 
})
//动态二级联动
layui.use('form', function(){
 var form = layui.form;
  form.on('select(test1)', function(obj){
  $('#test2').html('');
  var html='';
  if(obj.value==0){
   $.each(data,function(i,e){
    if(e.unitType==obj.value)
     html+=`<option data-type="${e.unitType}">${e.ruleName}</option>`;
   })
   $('#test2').append(html);
  }else if(obj.value==1){
   $.each(data,function(i,e){
    if(e.unitType==obj.value)
    html+=`<option data-type="${e.unitType}">${e.ruleName}</option>`;
   })
   $('#test2').append(html);
  }
  form.render('select');
 });
})
//二级联动完毕后获取对应的规则数据
$('#btn').click(function(){
 var thisValue=data.find((v)=>v.ruleName==$('#test2').val());
 console.log(thisValue); 
})
</script>
</html>
Copier après la connexion

Je crois que vous maîtrisez la méthode après lecture C'est le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention au site Web chinois php Autres articles connexes !

Lecture recommandée :

Comment gérer le fait que la page ne s'affiche pas lorsque Vue utilise le tableau suivant pour modifier le tableau

Comment utiliser le serveur de fichiers statique du nœud

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 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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Que signifie l'option dans la documentation Linux ? Que signifie l'option dans la documentation Linux ? Mar 07, 2023 am 10:41 AM

Sous Linux, option fait référence à une option de commande, qui est un commutateur qui ajuste le comportement d'exécution de la commande. Autrement dit, différentes options déterminent les résultats d'affichage de la commande. Les options sont divisées en options longues et options courtes : 1. Les options courtes sont guidées par « - ». Lorsqu'il existe plusieurs options courtes, des espaces sont utilisés pour séparer chaque option ; 2. Les options longues sont des mots complets et ne peuvent généralement pas être combinées. .

Existe-t-il un avenir pour l'emploi en pharmacie clinique à l'Université médicale de Harbin ? (Quelles sont les perspectives d'emploi pour la pharmacie clinique à l'Université médicale de Harbin ?) Existe-t-il un avenir pour l'emploi en pharmacie clinique à l'Université médicale de Harbin ? (Quelles sont les perspectives d'emploi pour la pharmacie clinique à l'Université médicale de Harbin ?) Jan 02, 2024 pm 08:54 PM

Quelles sont les perspectives d'emploi de la pharmacie clinique à l'Université médicale de Harbin ? Bien que la situation nationale de l'emploi ne soit pas optimiste, les diplômés en pharmacie ont toujours de bonnes perspectives d'emploi. Dans l'ensemble, l'offre de diplômés en pharmacie est inférieure à la demande. Les sociétés pharmaceutiques et les usines pharmaceutiques sont les principaux canaux d'absorption de ces diplômés. La demande de talents dans l'industrie pharmaceutique augmente également de manière constante. Selon les rapports, ces dernières années, le rapport offre-demande pour les étudiants diplômés dans des domaines tels que les préparations pharmaceutiques et la chimie médicinale naturelle a même atteint 1:10. Direction d'emploi de la majeure en pharmacie clinique : Après l'obtention de leur diplôme, les étudiants se spécialisant en médecine clinique peuvent s'engager dans le traitement médical, la prévention, la recherche médicale, etc. dans les unités médicales et sanitaires, la recherche médicale et d'autres départements. Postes d'emploi : Représentant médical, représentant commercial pharmaceutique, représentant commercial, directeur commercial, directeur régional des ventes, responsable des investissements, chef de produit, spécialiste produit, infirmière

Comment télécharger rapidement l'image Win10 Comment télécharger rapidement l'image Win10 Jan 07, 2024 am 11:33 AM

Récemment, des amis ont expliqué comment télécharger des fichiers image Win10. Étant donné qu'il existe de nombreux fichiers image sur le marché, que dois-je faire si je souhaite trouver un fichier standard à télécharger ? Aujourd'hui, l'éditeur vous a apporté le lien pour télécharger l'image et les étapes détaillées de la solution. Examinons-les ensemble. Téléchargement rapide de l'image Win10 et lien de téléchargement du didacticiel d'installation >>> Accueil système Image Ghostwin101909 version 64 bits v2019.11<<<>>>Image Win10 64 bits v2019.07<<<>>>Image Win10 32 bits v2019. 07<< <1. Rechercher sur Internet

Comment nettoyer le dossier temporaire Comment nettoyer le dossier temporaire Feb 22, 2024 am 09:15 AM

Comment nettoyer le dossier temporaire Au fur et à mesure que nous utilisons l'ordinateur, les fichiers temporaires (fichiers temporaires) s'accumuleront progressivement. Ces fichiers temporaires sont générés lorsque nous utilisons l'ordinateur, comme les fichiers cache lors de la navigation sur le Web, les fichiers temporaires lors de l'installation de logiciels, etc. Ne pas nettoyer le dossier temporaire pendant une longue période peut occuper une grande quantité d'espace disque et affecter la vitesse de l'ordinateur. Par conséquent, nettoyer régulièrement le dossier temporaire est une étape nécessaire pour maintenir les performances de l’ordinateur. Ci-dessous, nous présenterons quelques moyens simples de nettoyer le dossier temporaire. Méthode 1 : Nettoyer manuellement le t

Comment réinitialiser le système Win10 Comment réinitialiser le système Win10 Jun 29, 2023 pm 03:14 PM

Comment réinitialiser le système Win10 ? De nos jours, de nombreux amis aiment utiliser des ordinateurs équipés du système Win10. Cependant, ils rencontreront inévitablement des problèmes insolubles lors de l'utilisation d'ordinateurs. À ce stade, vous pouvez essayer de réinitialiser le système. Suivons l'éditeur pour regarder le tutoriel sur la réinitialisation du système Win10. Les utilisateurs dans le besoin ne devraient pas le manquer. Tutoriel sur la réinitialisation du système Win10 1. Cliquez sur Windows et sélectionnez Paramètres. 2. Cliquez sur Mise à jour et sécurité. 3. Sélectionnez Restaurer. 4. Cliquez sur Démarrer à droite pour réinitialiser cet ordinateur. Ce qui précède représente l'intégralité du contenu de [Comment réinitialiser le système Win10 - Tutoriel sur la réinitialisation du système Win10]. Des didacticiels plus intéressants sont disponibles sur ce site !

Comment vérifier la configuration de l'ordinateur Win11 Comment vérifier la configuration de l'ordinateur Win11 Jun 29, 2023 pm 12:15 PM

Comment vérifier la configuration de l’ordinateur win11 ? Le système win11 est une version très pratique du système d'exploitation informatique. Cette version offre aux utilisateurs des fonctions riches, permettant aux utilisateurs d'avoir une meilleure expérience d'exploitation informatique. De nombreux amis qui utilisent des ordinateurs sont curieux de connaître la configuration spécifique de leur ordinateur et la manière d'effectuer cette opération. dans le système win11 ? De nombreux amis ne savent pas comment fonctionner en détail. L'éditeur a compilé un didacticiel sur la façon d'afficher la configuration de l'ordinateur win11 ci-dessous. Si vous êtes intéressé, suivez l'éditeur et continuez à lire ! Tutoriel d'affichage de la configuration de l'ordinateur Win11 1. Cliquez sur l'icône Windows dans la barre des tâches ci-dessous ou appuyez sur la « touche Windows » du clavier pour ouvrir le menu Démarrer. 2. Recherchez « Paramètres » ou « sett » dans le menu Démarrer.

Résoudre le problème de détection de l'environnement lors de la réinstallation du système Résoudre le problème de détection de l'environnement lors de la réinstallation du système Jan 08, 2024 pm 03:33 PM

Comment résoudre le problème selon lequel le test d'environnement échoue lors de la réinstallation du système et doit être réécrit. La raison est la suivante : le téléphone mobile est empoisonné. Vous pouvez installer un logiciel antivirus tel que Mobile Manager pour l'antivirus 2. De nombreux fichiers indésirables. les fichiers sont stockés à l'intérieur du téléphone mobile, ce qui entraîne l'occupation de la mémoire active du téléphone mobile. Effacez simplement le cache du téléphone pour résoudre ce problème. 3. La mémoire du téléphone est trop occupée par les logiciels et les fichiers enregistrés. Il n'y a aucun problème à supprimer fréquemment les fichiers et les logiciels inutiles tant que votre configuration matérielle répond aux exigences d'installation. utilisez le nouveau directement. Réinstallez le système à partir du disque système ! Vous pouvez utiliser une clé USB ou un disque dur pour l'installation, ce qui est très rapide. Mais la clé est d'utiliser un disque système avec une bonne compatibilité (prend en charge l'installation en modes IDE, ACHI et RAID), et il peut être activé automatiquement et en permanence, ce qui a été vérifié. donc

À quoi fait référence l'option dans la documentation Linux ? À quoi fait référence l'option dans la documentation Linux ? May 16, 2023 am 09:55 AM

Sous Linux, option fait référence à une option de commande, qui est un commutateur qui ajuste le comportement d'exécution de la commande. Autrement dit, différentes options déterminent les résultats d'affichage de la commande. Les options sont divisées en options longues et options courtes : 1. Les options courtes sont guidées par « - ». Lorsqu'il existe plusieurs options courtes, des espaces sont utilisés pour séparer chaque option ; 2. Les options longues sont des mots complets et ne peuvent généralement pas être combinées. . Introduction aux options de commande (options) et paramètres sous Linux Après nous être connectés à Linux, nous pouvons saisir des commandes après le symbole # ou $ Parfois, la commande sera suivie de « options » (options en anglais) ou de « paramètres » (arguments en anglais). . Autrement dit, le format de commande sous Linux est : commande[opti

See all articles