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

집

웹 프론트엔드

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으로 문의하세요.

핫 AI 도구

뜨거운 도구

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.