求教：如何将子（child) dropdownlist中取的值，赋给上一级 （parent）dropdownlist


在web 客户端，通过css + div模拟了一个 (parent)drop down list，其内部嵌套另一个（child）drop down list， 想将内部子下拉菜单取值后的内容传给外层的drop down list后输出，但不知如何修改代码，求大家帮忙指点一下。以下是代码：
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>&nbsp;</h1>
                <h2>&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;
}

解决方案 »

  1.   

    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
    .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;
    }
      

  2.   

    这里改下试下obj.opts.on('click',function(){
                            var opt = $(this);
                            var temp = $(this).find('a select');
                            obj.val = temp.val();
                            obj.txt = temp.children('option[value='+obj.val+']').text();
                            obj.index = opt.index();
                            if(obj.val)
                             obj.placeholder.text('Select Contact: ' + obj.val +'  , ' +obj.txt);
                        });
      

  3.   

    跟着做了一下，的确不错，但这样取内部dropdownlist值正常了，但取其它值失效
    顺便问一下，如果内嵌的下级dropdownlist是autocomplete形式，用此方法是否也可以正常取值？再谢！
      

  4.   

    多谢楼上的朋友！
    在网上找了一段dropdownlist autocomplete的代码，改了一下单独运行没问题，但插入到现有程序中做二级子下拉菜单用时，无法实现原有功能，且所有上级下拉菜单的取值就全乱了。尝试了一些方法，但由于对Javascript的掌握还处于较浅的阶段，实在搞不定，请诸位网友帮忙修改一下，我会认真学习尽快提高。下面是源码：
    <!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>
         <script type="text/javascript" src="jquery.min.js"></script>
        </head>
        <body>
            <div class="container">

    <!-- Codrops top bar -->
                <div class="codrops-top"></div><!--/ Codrops top bar -->

    <header>

    <h1>Custom <strong>Drop-Down List</strong></h1>
    <h2>&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">Allan Roberts</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="#">
             <div class="contextCell" style="padding: 0 5px 0 5px;">
             <div class="DropdownContainerNoMargin">
             <form>
                   <select id="myselect">
                 <option value="1">Aachener Stra&#223;e</option>
                 <option value="2">Abbestra&#223;e</option>
                 <option value="3">Adalbertstra&#223;e</option>
                 <option value="4">Adam-von-Trott-Stra&#223;e</option>
                 <option value="5">Adenauerplatz</option>
                 <option value="6">One Report&#223;e</option>
               </select>
                 </form>
           </div>
             </div>
                                 </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>
         <script type="text/javascript" src="jquery.searchabledropdown-1.0.8.min.js"></script>
        <script type="text/javascript">
    $(document).ready(function() {
    $("select").searchable();
    });


    // demo functions
    $(document).ready(function() {
    $("#value").html($("#myselect :selected").text() + " (VALUE: " + $("#myselect").val() + ")");
    $("select").change(function(){
    $("#value").html(this.options[this.selectedIndex].text + " (VALUE: " + this.value + ")");
    });
    });

    function modifySelect() {
    $("select").get(0).selectedIndex = 5;
    }

    function appendSelectOption(str) {
    $("select").append("<option value=\"" + str + "\">" + str + "</option>");
    }

    function applyOptions() {   
    $("select").searchable({
    maxListSize: $("#maxListSize").val(),
    maxMultiMatch: $("#maxMultiMatch").val(),
    latency: $("#latency").val(),
    exactMatch: $("#exactMatch").get(0).checked,
    wildcards: $("#wildcards").get(0).checked,
    ignoreCase: $("#ignoreCase").get(0).checked
    });

    alert(
    "OPTIONS\n---------------------------\n" + 
    "maxListSize: " + $("#maxListSize").val() + "\n" +
    "maxMultiMatch: " + $("#maxMultiMatch").val() + "\n" +
    "exactMatch: " + $("#exactMatch").get(0).checked + "\n"+
    "wildcards: " + $("#wildcards").get(0).checked + "\n" +
    "ignoreCase: " + $("#ignoreCase").get(0).checked + "\n" +
    "latency: " + $("#latency").val()
    );
    }
    </script>
        
        
    <!-- jQuery if needed -->
    <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);
    });
    obj.opts.on('click',function(){
                            var opt = $(this);
                            var temp = $(this).find('a select');
                            obj.val = temp.val();
                            obj.txt = temp.children('option[value='+obj.val+']').text();
                            obj.index = opt.index();
                            if(obj.val)
                             obj.placeholder.text('Select Contact: ' + obj.val +'  , ' +obj.txt);
                        });
    },
    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>
      

  5.   

    给span加个id试下
    <span id="value">Select Contact</span>select的ID不要有重复的，引用到的JS你也没有贴出来。
      

  6.   

    关键还是如果存在一个带有auto complete功能的下拉菜单，不知如何实现第二级dropdownlist向第一级dropdownlist传递数据