interface Web
tutoriel HTML
求教：如何在一个drop down list 内部 再嵌套另一个drop down list 并取值_html/css_WEB-ITnose
求教：如何在一个drop down list 内部 再嵌套另一个drop down list 并取值_html/css_WEB-ITnose
最近在web 前台（front-end）开发时遇到一个技术问题，但没查到解决方法，想请教一下：在web 客户端（client side）如何实现在一个“父 (parent)" drop down list内部 再嵌套另一个”子（child）“drop down list 并将子下拉菜单取值后的内容传给上一级下拉菜单后输出
回复讨论(解决方案)
1.外层的drop down list 通过其他元素如div去模拟
2.重新设计使之更合理 这种情况可以像常见的选择了省份在选择市之类的关联选择那样选择
多谢楼上的朋友。由于我经验很有限，不知能否提供一些实例，或给个链接参考一下。
谢先！
现在遇到的情况是这样的：
（1）在firefox上运行异常；
（2）子（child)dropdownlist中取的值，不知如何赋给上一dropdownlist（即由css，div模拟的那个parent dropdownlist）
练习源代码如下：
demo.html
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Custom Drop-Down List Styling</title> <link rel="stylesheet" type="text/css" href="style.css" /> <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css' /> <script type="text/javascript" src="modernizr.custom.79639.js"></script> <noscript><link rel="stylesheet" type="text/css" href="noJS.css" /></noscript> </head> <body> <div class="container"> <!-- Codrops top bar --> <div class="codrops-top"></div><!--/ Codrops top bar --> <header> <h1 id="nbsp"> </h1> <h2 id="nbsp"> </h2> <nav class="codrops-demos"></nav> </header> <section class="main"> <div class="wrapper-demo"> <div id="dd" class="wrapper-dropdown-1" tabindex="1"> <span>Select Contact</span> <ul class="dropdown" tabindex="1"> <li><a href="#"> <form> <select id="myselect"> <option value="1">Ed Bradley</option> <option value="2">Contact2</option> <option value="3">Contact3</option> </select> </form> </a> </li> <li><a href="#"> <form> <select id="myselect"> <option value="0">Select a Saved List</option> <option value="1">List1</option> <option value="2">List2</option> <option value="3">List3</option> </select> </form> </a> </li> <li><a href="#">Active Search - 200 Contacts</a></li> <li><a href="#">All Contacts - 70000 Contacts</a></li> </ul> </div> ?</div> </section> </div> <!-- jQuery if needed --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript"> function DropDown(el) { this.dd = el; this.placeholder = this.dd.children('span'); this.opts = this.dd.find('ul.dropdown > li'); this.val = ''; this.index = -1; this.initEvents(); } DropDown.prototype = { initEvents : function() { var obj = this; obj.dd.on('click', function(event){ $(this).toggleClass('active'); return false; }); obj.opts.on('click',function(){ var opt = $(this); obj.val = opt.text(); obj.index = opt.index(); obj.placeholder.text('Select Contact: ' + obj.val); }); }, getValue : function() { return this.val; }, getIndex : function() { return this.index; } } $(function() { var dd = new DropDown( $('#dd') ); $(document).click(function() { // all dropdowns $('.wrapper-dropdown-1').removeClass('active'); }); }); </script> </body></html> style.css
@import url('demo.css');@import url('font-awesome.css');/* GLOBALS */*,*:after,*:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0;}::selection { background: transparent; }::-moz-selection { background: transparent; }.wrapper-demo { margin: 60px 0 0 0; *zoom: 1; font-weight: 400;}.wrapper-demo:after { clear: both; content: ""; display: table;}/* DEMO 1 */.wrapper-dropdown-1 { /* Size and position */ position: relative; /* Enable absolute positionning for children and pseudo elements */ width: 400px; padding: 10px; margin: 0 auto; /* Styles */ background: #9bc7de; color: #fff; outline: none; cursor: pointer; /* Font settings */ font-weight: bold;}.wrapper-dropdown-1:after { content: ""; width: 0; height: 0; position: absolute; right: 16px; top: 50%; margin-top: -6px; border-width: 6px 0 6px 6px; border-style: solid; border-color: transparent #fff; }.wrapper-dropdown-1 .dropdown { /* Size & position */ position: absolute; top: 100%; left: 0; right: 0; /* Styles */ background: #fff; list-style: none; font-weight: normal; /* Cancels previous font-weight: bold; */ /* Hiding */ opacity: 0; pointer-events: none;}.wrapper-dropdown-1 .dropdown li a { display: block; text-decoration: none; color: #9e9e9e; padding: 10px 20px;}/* Hover state */.wrapper-dropdown-1 .dropdown li:hover a { background: #f3f8f8;}/* Active state */.wrapper-dropdown-1.active .dropdown { opacity: 1; pointer-events: auto;}.wrapper-dropdown-1.active:after { border-color: #9bc7de transparent; border-width: 6px 6px 0 6px ; margin-top: -3px;}.wrapper-dropdown-1.active { background: #9bc7de; background: -moz-linear-gradient(left, #9bc7de 0%, #9bc7de 78%, #ffffff 78%, #ffffff 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#9bc7de), color-stop(78%,#9bc7de), color-stop(78%,#ffffff), color-stop(100%,#ffffff)); background: -webkit-linear-gradient(left, #9bc7de 0%,#9bc7de 78%,#ffffff 78%,#ffffff 100%); background: -o-linear-gradient(left, #9bc7de 0%,#9bc7de 78%,#ffffff 78%,#ffffff 100%); background: -ms-linear-gradient(left, #9bc7de 0%,#9bc7de 78%,#ffffff 78%,#ffffff 100%); background: linear-gradient(to right, #9bc7de 0%,#9bc7de 78%,#ffffff 78%,#ffffff 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9bc7de', endColorstr='#ffffff',GradientType=1 );}/* No CSS3 support */.no-opacity .wrapper-dropdown-1 .dropdown,.no-pointerevents .wrapper-dropdown-1 .dropdown { display: none; opacity: 1; /* If opacity support but no pointer-events support */ pointer-events: auto; /* If pointer-events support but no pointer-events support */}.no-opacity .wrapper-dropdown-1.active .dropdown,.no-pointerevents .wrapper-dropdown-1.active .dropdown { display: block;}demo.css
/* General Demo Style */body { font-family: 'Lato', 'Arial', sans-serif; background: #ddd url(../images/bg.jpg); font-weight: 300; font-size: 15px; color: #333; -webkit-font-smoothing: antialiased; overflow-y: scroll; overflow-x: hidden;}a { color: #555; text-decoration: none;}.container { width: 100%; position: relative;}.clr { clear: both; padding: 0; height: 0; margin: 0;}.main { width: 90%; margin: 0 auto; position: relative;}.container > header { margin: 10px; padding: 20px 10px 10px 10px; position: relative; display: block; text-shadow: 1px 1px 1px rgba(0,0,0,0.2); text-align: center;}.container > header h1 { font-size: 30px; line-height: 38px; margin: 0; position: relative; font-weight: 300; color: #666; text-shadow: 1px 1px 1px rgba(255,255,255,0.7);}.container > header h2 { font-size: 14px; font-weight: 300; margin: 0; padding: 15px 0 5px 0; color: #888; font-family: Cambria, Georgia, serif; font-style: italic; text-shadow: 1px 1px 1px rgba(255,255,255,0.9);}/* Header Style */.codrops-top { line-height: 24px; font-size: 11px; background: #fff; background: rgba(255, 255, 255, 0.5); text-transform: uppercase; z-index: 9999; position: relative; font-family: Cambria, Georgia, serif; box-shadow: 1px 0px 2px rgba(0,0,0,0.2);}/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */.codrops-top:before,.codrops-top:after { content: " "; /* 1 */ display: table; /* 2 */}.codrops-top:after { clear: both}.codrops-top a { padding: 0px 10px; letter-spacing: 1px; color: #333; display: inline-block;}.codrops-top a:hover { background: rgba(255,255,255,0.6);}.codrops-top span.right { float: right;}.codrops-top span.right a { float: left; display: block;}/* Demo Buttons Style */.codrops-demos { text-align:center; display: block; line-height: 30px; padding: 5px 0px;}.codrops-demos a { display: inline-block; margin: 0px 4px; padding: 0px 6px; color: #aaa; line-height: 20px; font-size: 12px; font-weight: 700; text-shadow: 1px 1px 1px #fff; border: 1px solid #fff; background: #ffffff; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */ background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);}.codrops-demos a:hover { color: #333; background: #fff;}.codrops-demos a:active { background: #fff;}.codrops-demos a.current-demo,.codrops-demos a.current-demo:hover { background: #f0f0f0; border-color: #d9d9d9; color: #aaa; box-shadow: 0 1px 0 rgba(255,255,255,0.3); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */}.support-note span { color: #ac375d; font-size: 16px; display: none; font-weight: bold; text-align: center; padding: 5px 0;}.no-cssanimations .support-note span.no-cssanimations,.no-csstransforms .support-note span.no-csstransforms,.no-csstransforms3d .support-note span.no-csstransforms3d,.no-csstransitions .support-note span.no-csstransitions { display: block;}noJS.css
/* DEMO 1 */.wrapper-dropdown-1:focus .dropdown { opacity: 1; pointer-events: auto;}.wrapper-dropdown-1:focus:after { border-color: #9bc7de transparent; border-width: 6px 6px 0 6px ; margin-top: -3px;}
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
AI Hentai Generator
Générez AI Hentai gratuitement.
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
Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version?
Mar 04, 2025 pm 12:32 PM
Le cache de mise à jour de la page Web du compte officiel, cette chose est simple et simple, et elle est suffisamment compliquée pour en boire un pot. Vous avez travaillé dur pour mettre à jour l'article officiel du compte, mais l'utilisateur a toujours ouvert l'ancienne version. Dans cet article, jetons un coup d'œil aux rebondissements derrière cela et comment résoudre ce problème gracieusement. Après l'avoir lu, vous pouvez facilement faire face à divers problèmes de mise en cache, permettant à vos utilisateurs de toujours ressentir le contenu le plus frais. Parlons d'abord des bases. Pour le dire franchement, afin d'améliorer la vitesse d'accès, le navigateur ou le serveur stocke des ressources statiques (telles que des images, CSS, JS) ou du contenu de la page. La prochaine fois que vous y accédez, vous pouvez le récupérer directement à partir du cache sans avoir à le télécharger à nouveau, et il est naturellement rapide. Mais cette chose est aussi une épée à double tranchant. La nouvelle version est en ligne,
Comment ajouter efficacement les effets de course aux images PNG sur les pages Web?
Mar 04, 2025 pm 02:39 PM
Cet article démontre un ajout de bordure PNG efficace aux pages Web à l'aide de CSS. Il soutient que CSS offre des performances supérieures par rapport à JavaScript ou à des bibliothèques, détaillant comment ajuster la largeur, le style et la couleur des bordures pour un effet subtil ou proéminent
Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur?
Mar 17, 2025 pm 12:27 PM
L'article discute de l'utilisation des attributs de validation de formulaire HTML5 comme les limites requises, motifs, min, max et longueurs pour valider la saisie de l'utilisateur directement dans le navigateur.
Quel est le but du & lt; datalist & gt; élément?
Mar 21, 2025 pm 12:33 PM
L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159
Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5?
Mar 17, 2025 pm 12:20 PM
L'article examine les meilleures pratiques pour assurer la compatibilité des navigateurs de HTML5, en se concentrant sur la détection des fonctionnalités, l'amélioration progressive et les méthodes de test.
Quel est le but du & lt; Progress & gt; élément?
Mar 21, 2025 pm 12:34 PM
L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati
Quel est le but du & lt; mètre & gt; élément?
Mar 21, 2025 pm 12:35 PM
L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex
Comment utiliser le html5 & lt; time & gt; élément pour représenter les dates et les temps sémantiquement?
Mar 12, 2025 pm 04:05 PM
Cet article explique le html5 & lt; time & gt; élément de représentation sémantique de date / heure. Il souligne l'importance de l'attribut DateTime pour la lisibilité à la machine (format ISO 8601) à côté du texte lisible par l'homme, stimulant AccessIbilit
