求教：如何在一个drop down list 内部再嵌套另一个drop down list 并取值_html/css

Heim

Web-Frontend

HTML-Tutorial

求教：如何在一个drop down list 内部再嵌套另一个drop down list 并取值_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:19 PM

最近在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;}

Stellungnahme

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Verwandter Artikel

HTML und Code: Ein genauerer Blick auf die TerminologieApr 10, 2025 am 09:28 AM

HtmlisaspecifictypeofcodeFocusedonstructuringuringwebcontent, während "Code" breitincludesluages -ähnlichjavaScriptandpythonforfunctionality.1) htmldefineswebpageStructureStags.2) "Code" cometesaWiNrangeOfLanguagesForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForfirsInsForfunctionNacts

HTML, CSS und JavaScript: Wesentliche Tools für WebentwicklerApr 09, 2025 am 12:12 AM

HTML, CSS und JavaScript sind die drei Säulen der Webentwicklung. 1. HTML definiert die Webseitenstruktur und verwendet Tags wie z.

Die Rollen von HTML, CSS und JavaScript: KernverantwortungApr 08, 2025 pm 07:05 PM

HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.

Ist HTML für Anfänger leicht zu lernen?Apr 07, 2025 am 12:11 AM

HTML ist für Anfänger geeignet, da es einfach und leicht zu lernen ist und schnell Ergebnisse sehen kann. 1) Die Lernkurve von HTML ist glatt und leicht zu beginnen. 2) Beherrschen Sie einfach die grundlegenden Tags, um Webseiten zu erstellen. 3) hohe Flexibilität und kann in Kombination mit CSS und JavaScript verwendet werden. 4) Reiche Lernressourcen und moderne Tools unterstützen den Lernprozess.

Was ist ein Beispiel für ein Start -Tag in HTML?Apr 06, 2025 am 12:04 AM

AnexampleofaTartingTaginHtmlis, die, die starttagsaresesinginhtmlastheyinitiateElements, definetheirtypes, andarecrucialForstructuringwebpages und -konstruktionsthedoms.

Wie kann ich das Flexbox -Layout von CSS verwenden, um eine zentrale Ausrichtung des Segmentierungseffekts für gepunktete Linien im Menü zu erzielen?Apr 05, 2025 pm 01:24 PM

Wie gestalte ich den Segmentierungseffekt der gepunkteten Linien im Menü? Bei der Gestaltung von Menüs ist es normalerweise nicht schwierig, links und rechts zwischen dem Gerichtsnamen und dem Preis von Schalen auszurichten, aber wie wäre es mit der gepunkteten Linie oder dem Punkt in der Mitte ...

Welche HTML -Elemente verwendet der Online -Code -Editor zum Implementieren von Codeeingaben?Apr 05, 2025 pm 01:21 PM

HTML -Elementanalyse im Webcode -Editor Viele Online -Code -Editoren ermöglichen es Benutzern, HTML-, CSS- und JavaScript -Code einzugeben. Vor kurzem hat jemand vorgeschlagen ...