hujung hadapan web
html tutorial
求教：如何在一个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;}
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1665
14
1423
52
1321
25
1269
29
1249
24
Memahami HTML, CSS, dan JavaScript: Panduan Pemula
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.
HTML: Struktur, CSS: Gaya, JavaScript: Tingkah Laku
Apr 18, 2025 am 12:09 AM
Peranan HTML, CSS dan JavaScript dalam pembangunan web adalah: 1. HTML mentakrifkan struktur laman web, 2. CSS mengawal gaya laman web, dan 3. JavaScript menambah tingkah laku dinamik. Bersama -sama, mereka membina kerangka, estetika dan interaktiviti laman web moden.
Masa Depan HTML, CSS, dan JavaScript: Trend Pembangunan Web
Apr 19, 2025 am 12:02 AM
Trend masa depan HTML adalah semantik dan komponen web, trend masa depan CSS adalah CSS-in-JS dan CSShoudini, dan trend masa depan JavaScript adalah webassembly dan tanpa pelayan. 1. Semantik HTML meningkatkan kebolehcapaian dan kesan SEO, dan komponen web meningkatkan kecekapan pembangunan, tetapi perhatian harus dibayar kepada keserasian penyemak imbas. 2. CSS-in-JS meningkatkan fleksibiliti pengurusan gaya tetapi boleh meningkatkan saiz fail. Csshoudini membolehkan operasi langsung rendering CSS. 3.Webassembly mengoptimumkan prestasi aplikasi penyemak imbas tetapi mempunyai keluk pembelajaran yang curam, dan tanpa pelayan memudahkan pembangunan tetapi memerlukan pengoptimuman masalah permulaan sejuk.
Masa Depan HTML: Evolusi dan Trend dalam Reka Bentuk Web
Apr 17, 2025 am 12:12 AM
Masa depan HTML penuh dengan kemungkinan yang tidak terhingga. 1) Ciri -ciri dan piawaian baru akan merangkumi lebih banyak tag semantik dan populariti komponen web. 2) Trend reka bentuk web akan terus berkembang ke arah reka bentuk yang responsif dan boleh diakses. 3) Pengoptimuman prestasi akan meningkatkan pengalaman pengguna melalui pemuatan imej yang responsif dan teknologi pemuatan malas.
HTML vs CSS vs JavaScript: Gambaran Keseluruhan Perbandingan
Apr 16, 2025 am 12:04 AM
Peranan HTML, CSS dan JavaScript dalam pembangunan web adalah: HTML bertanggungjawab untuk struktur kandungan, CSS bertanggungjawab untuk gaya, dan JavaScript bertanggungjawab untuk tingkah laku dinamik. 1. HTML mentakrifkan struktur laman web dan kandungan melalui tag untuk memastikan semantik. 2. CSS mengawal gaya laman web melalui pemilih dan atribut untuk menjadikannya cantik dan mudah dibaca. 3. JavaScript mengawal tingkah laku laman web melalui skrip untuk mencapai fungsi dinamik dan interaktif.
HTML: Membina struktur laman web
Apr 14, 2025 am 12:14 AM
HTML adalah asas struktur laman web bangunan. 1. HTML mentakrifkan struktur kandungan dan semantik, dan penggunaan, dan sebagainya. 2. Menyediakan penanda semantik, seperti, dan sebagainya, untuk meningkatkan kesan SEO. 3. Untuk merealisasikan interaksi pengguna melalui tag, perhatikan pengesahan bentuk. 4. Gunakan elemen lanjutan seperti, digabungkan dengan JavaScript untuk mencapai kesan dinamik. 5. Kesilapan biasa termasuk label yang tidak terkawal dan nilai atribut yang tidak disebutkan, dan alat pengesahan diperlukan. 6. Strategi pengoptimuman termasuk mengurangkan permintaan HTTP, memampatkan HTML, menggunakan tag semantik, dll.
HTML vs CSS dan JavaScript: Membandingkan Teknologi Web
Apr 23, 2025 am 12:05 AM
HTML, CSS dan JavaScript adalah teknologi teras untuk membina laman web moden: 1. HTML mentakrifkan struktur laman web, 2. CSS bertanggungjawab untuk kemunculan laman web, 3.
HTML: Adakah bahasa pengaturcaraan atau yang lain?
Apr 15, 2025 am 12:13 AM
Htmlisnotaprogramminglanguage; itisamarkuplanguage.1) htmlstructuresandformatswebcontentusingtags.2) itworkswithcssforstylingandjavascriptforinteractivity, meningkatkan pembangunan semula.
