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

首頁

web前端

html教學

求教：如何在一个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;}

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML的未來：進化和趨勢May 13, 2025 am 12:01 AM

HTML的未來將朝著更加語義化、功能化和模塊化的方向發展。 1)語義化將使標籤更明確地描述內容，提升SEO和無障礙訪問。 2)功能化將引入新元素和屬性，滿足用戶需求。 3)模塊化將支持組件化開發，提高代碼復用性。

為什麼HTML屬性對Web開發很重要？May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevelopment forcontrollingBehavior，外觀和功能

Alt屬性的目的是什麼？為什麼重要？May 11, 2025 am 12:01 AM

alt屬性是HTML中標籤的重要部分，用於提供圖片的替代文本。 1.當圖片無法加載時，alt屬性中的文本會顯示，提升用戶體驗。 2.屏幕閱讀器使用alt屬性幫助視障用戶理解圖片內容。 3.搜索引擎索引alt屬性中的文本，提高網頁的SEO排名。

HTML，CSS和JavaScript：示例和實際應用May 09, 2025 am 12:01 AM

HTML、CSS和JavaScript在網頁開發中的作用分別是：1.HTML用於構建網頁結構；2.CSS用於美化網頁外觀；3.JavaScript用於實現動態交互。通過標籤、樣式和腳本，這三者共同構築了現代網頁的核心功能。

如何在標籤上設置lang屬性？為什麼這很重要？May 08, 2025 am 12:03 AM

設置標籤的lang屬性是優化網頁可訪問性和SEO的關鍵步驟。 1)在標籤中設置lang屬性，如。 2)在多語言內容中，為不同語言部分設置lang屬性，如。 3)使用符合ISO639-1標準的語言代碼，如"en"、"fr"、"zh"等。正確設置lang屬性可以提高網頁的可訪問性和搜索引擎排名。

HTML屬性的目的是什麼？May 07, 2025 am 12:01 AM

htmlattributeseresene forenhancingwebelements'functionalityandAppearance.TheyAdDinformationTodeFineBehavior，外觀和互動，使網站互動，響應式，visalalyAppealing.AttributesLikutesLikeSlikEslikesrc，href，href，href，類，類型，類型，和dissabledtransfransformformformformformformformformformformformformformformforment

您如何在HTML中創建列表？May 06, 2025 am 12:01 AM

toCreateAlistInHtml，useforforunordedlistsandfororderedlists：1）forunorderedlists，wrapitemsinanduseforeachItem，RenderingeringAsabulletedList.2）fororderedlists，useandfornumberedlists，useandfornumberedlists，casundfornumberedlists，casundfornthetthetthetthetthetthetthetttributefordforderfordforderforderentnumberingsnumberingsnumberingStys。