Comment gérer la superposition d'options de sélection
Cette fois, je vais vous montrer comment gérer la superposition d'options de select. Quelles sont les précautions lors de la gestion de la superposition d'options de select. Voici un cas pratique, jetons-y un coup d'œil. ensemble.
<!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>Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture recommandée :
Comment importer la bibliothèque CSS dans vue.js
Comment installer les composants vue et element
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
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 !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Le processus de fonctionnement de l'hôte de service WIN10 occupant trop de CPU
Mar 27, 2024 pm 02:41 PM
1. Tout d'abord, nous cliquons avec le bouton droit sur l'espace vide de la barre des tâches et sélectionnons l'option [Gestionnaire des tâches], ou cliquons avec le bouton droit sur le logo de démarrage, puis sélectionnons l'option [Gestionnaire des tâches]. 2. Dans l'interface du Gestionnaire des tâches ouverte, nous cliquons sur l'onglet [Services] à l'extrême droite. 3. Dans l'onglet [Service] ouvert, cliquez sur l'option [Ouvrir le service] ci-dessous. 4. Dans la fenêtre [Services] qui s'ouvre, cliquez avec le bouton droit sur le service [InternetConnectionSharing(ICS)], puis sélectionnez l'option [Propriétés]. 5. Dans la fenêtre des propriétés qui s'ouvre, remplacez [Ouvrir avec] par [Désactivé], cliquez sur [Appliquer] puis cliquez sur [OK]. 6. Cliquez sur le logo Démarrer, puis cliquez sur le bouton d'arrêt, sélectionnez [Redémarrer] et terminez le redémarrage de l'ordinateur.
Un guide rapide sur la manipulation des fichiers CSV
Dec 26, 2023 pm 02:23 PM
Apprenez rapidement à ouvrir et traiter des fichiers au format CSV Avec le développement continu de l'analyse et du traitement des données, le format CSV est devenu l'un des formats de fichiers les plus utilisés. Un fichier CSV est un fichier texte simple et facile à lire avec différents champs de données séparés par des virgules. Que ce soit dans la recherche académique, l'analyse commerciale ou le traitement de données, nous rencontrons souvent des situations où nous devons ouvrir et traiter des fichiers CSV. Le guide suivant vous montrera comment apprendre rapidement à ouvrir et traiter des fichiers au format CSV. Étape 1 : Comprendre le format de fichier CSV. Tout d'abord,
Apprenez à gérer les caractères spéciaux et à convertir les guillemets simples en PHP
Mar 27, 2024 pm 12:39 PM
Dans le processus de développement PHP, la gestion des caractères spéciaux est un problème courant, en particulier dans le traitement des chaînes, les caractères spéciaux sont souvent échappés. Parmi eux, la conversion de caractères spéciaux en guillemets simples est une exigence relativement courante, car en PHP, les guillemets simples sont un moyen courant d'encapsuler des chaînes. Dans cet article, nous expliquerons comment gérer les guillemets simples de conversion de caractères spéciaux en PHP et fournirons des exemples de code spécifiques. En PHP, les caractères spéciaux incluent, sans s'y limiter, les guillemets simples ('), les guillemets doubles ("), la barre oblique inverse (), etc. Dans les chaînes
Comment gérer les formats de données XML et JSON dans le développement C#
Oct 09, 2023 pm 06:15 PM
La gestion des formats de données XML et JSON dans le développement C# nécessite des exemples de code spécifiques. Dans le développement de logiciels modernes, XML et JSON sont deux formats de données largement utilisés. XML (Extensible Markup Language) est un langage de balisage permettant de stocker et de transmettre des données, tandis que JSON (JavaScript Object Notation) est un format d'échange de données léger. Dans le développement C#, nous devons souvent traiter et exploiter des données XML et JSON. Cet article se concentrera sur la façon d'utiliser C# pour traiter ces deux formats de données et les attacher.
Comment résoudre le problème après l'échec de la mise à niveau de Win7 vers Win10 ?
Dec 26, 2023 pm 07:49 PM
Si le système d'exploitation que nous utilisons est Win7, certains amis peuvent ne pas réussir à passer de Win7 à Win10 lors de la mise à niveau. L'éditeur pense que nous pouvons réessayer la mise à jour pour voir si cela peut résoudre le problème. Jetons un coup d'œil à ce que l'éditeur a fait pour plus de détails ~ Que faire si Win7 ne parvient pas à passer à Win10 Méthode 1 : 1. Il est recommandé de télécharger d'abord un pilote pour évaluer si votre ordinateur peut être mis à niveau vers Win10. utilisez le test du pilote après la mise à niveau. Vérifiez s'il y a des anomalies du pilote, puis corrigez-les en un seul clic. Méthode 2 : 1. Supprimez tous les fichiers sous C:\Windows\SoftwareDistribution\Download. 2.win+R exécutez "wuauclt.e
Méthode de traitement asynchrone de la programmation simultanée Select Channels Go à l'aide de Golang
Sep 28, 2023 pm 05:27 PM
Méthode de traitement asynchrone de la programmation simultanée SelectChannelsGo à l'aide de golang Introduction : La programmation simultanée est un domaine important dans le développement de logiciels modernes, qui peut améliorer efficacement les performances et la réactivité des applications. Dans le langage Go, la programmation simultanée peut être implémentée de manière simple et efficace à l'aide des instructions Channels et Select. Cet article explique comment utiliser Golang pour les méthodes de traitement asynchrone de la programmation simultanée SelectChannelsGo et fournit des informations spécifiques.
Compétences en gestion des exceptions et en journalisation des erreurs en C#
Oct 08, 2023 am 11:51 AM
Compétences en gestion des exceptions et en journalisation des erreurs en C# Introduction : Dans le processus de développement logiciel, la gestion des exceptions et la journalisation des erreurs sont des liens très importants. Pour les développeurs C#, la maîtrise des compétences de gestion des exceptions et des méthodes de journalisation des erreurs peut nous aider à mieux suivre et déboguer le code, et à améliorer la stabilité et la maintenabilité du programme. Cet article présentera les techniques courantes de gestion des exceptions en C# et fournira des exemples de code spécifiques pour aider les lecteurs à mieux comprendre et appliquer la gestion des exceptions et la journalisation des erreurs. 1. Concepts de base de la gestion des exceptions Les exceptions font référence à
Générateurs en PHP7 : Comment gérer efficacement des données à grande échelle et économiser de la mémoire ?
Oct 20, 2023 pm 04:42 PM
Générateurs en PHP7 : Comment gérer efficacement des données à grande échelle et économiser de la mémoire ? Présentation : PHP7 présente les générateurs comme un outil puissant en termes de traitement de données à grande échelle et d'économie de mémoire. Les générateurs sont un type spécial de fonction dans le langage PHP. Contrairement aux fonctions ordinaires, les générateurs peuvent suspendre l'exécution et renvoyer des résultats intermédiaires au lieu de renvoyer tous les résultats en même temps. Cela rend le générateur idéal pour traiter de gros lots de données, réduisant ainsi l'utilisation de la mémoire et améliorant l'efficacité du traitement. Cet article présentera aux étudiants
