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