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

bj_dingw 2013-02-28 11:51:05

在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> </h1>

                <h2> </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;

}



...全文
249 11 打赏 收藏 转发到动态 举报
写回复
用AI写文章
11 条回复
切换为时间正序
请发表友善的回复…
发表回复
bj_dingw 2013-03-04
  • 打赏
  • 举报
 回复
关键还是如果存在一个带有auto complete功能的下拉菜单，不知如何实现第二级dropdownlist向第一级dropdownlist传递数据
bj_dingw 2013-03-04
  • 打赏
  • 举报
 回复
引用 8 楼 bbjbepzz 的回复:
CodePorter@163.com
自己又试了下，还是不行，笨啊
bj_dingw 2013-03-04
  • 打赏
  • 举报
 回复
诸位帮个忙吧
bbjbepzz 2013-03-01
  • 打赏
  • 举报
 回复
给span加个id试下 <span id="value">Select Contact</span> select的ID不要有重复的，引用到的JS你也没有贴出来。
bj_dingw 2013-03-01
  • 打赏
  • 举报
 回复
多谢楼上的朋友！ 在网上找了一段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> </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ße</option>
            										<option value="2">Abbestraße</option>
            										<option value="3">Adalbertstraße</option>
            										<option value="4">Adam-von-Trott-Straße</option>
            										<option value="5">Adenauerplatz</option>
            										<option value="6">One Reportß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>
bbjbepzz 2013-03-01
  • 打赏
  • 举报
 回复
CodePorter@163.com
bj_dingw 2013-03-01
  • 打赏
  • 举报
 回复
引用 6 楼 bbjbepzz 的回复:
给span加个id试下 <span id="value">Select Contact</span> select的ID不要有重复的，引用到的JS你也没有贴出来。
好像还是不行，不知怎么上传文件，不知你的邮箱，我可以把代码打包给你
bbjbepzz 2013-02-28
  • 打赏
  • 举报
 回复
这里改下试下 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); });
bj_dingw 2013-02-28
  • 打赏
  • 举报
 回复
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;
}
bbjbepzz 2013-02-28
  • 打赏
  • 举报
 回复
有什么问题，自己先动手改一下，完善一下
cherryhood 2013-02-28
  • 打赏
  • 举报
 回复
引用 2 楼 bbjbepzz 的回复:
这里改下试下 obj.opts.on('click',function(){ var opt = $(this); var temp = $(this).find('a select'); obj.val = temp……
跟着做了一下，的确不错，但这样取内部dropdownlist值正常了，但取其它值失效 顺便问一下，如果内嵌的下级dropdownlist是autocomplete形式，用此方法是否也可以正常取值？再谢！
DropDownList>中设置默认选择值
这是通过实现的，在实现时，下拉的是从数据库中获取到的，但是默认选择并不是第一个，而是要显示的是已经默认的那一个。 有两种方法实现：   this.danxuandizhi.SelectItem.Text;   this.danxuandizhi.Text ； 对于第一种方法，在使用的时候可能出现Item的混乱，建议使用第二种方法，下面的效果就是使用第二种方法。
JS 获取asp:DropDownList下拉框控件的值
维护公司一个运行三四年的老项目，发现有一个页面是使用asp:DropDownList控件来实现下拉框的，这种使用asp控件的实现思路都是在cs文件中绑定和获取下拉框的数据，但是我们需要在js中获取asp:DropDownList选择的数据。本来最好的办法是用JS重写整个页面，但是重写整个页面工作量太大了，所有从网上找到了一个折中的办法，在js中获取获取asp:DropDownList选择的数据。 1、aspx页面 <asp:DropDownList ID="dropDownLis...
js、jquery获取asp:dropdownlist值的方法
一、js 获取asp:dropdownlist选中的值 var eSection = document.getElementById("<%=tx_ddlType.ClientID%>"); var eSectionValue = eSection.options[eSection.selectedIndex].value; alert(eSectionValue); 二、jQuery获取asp:dropdownlist选中的值 //获取value值 $("#ddlSubmodel").val(
好好学习：js中设置dropdownlist的值
程序中要求显示多列的DropDownList，选择其中一项后，需要设置对应dropdownlist的值，只好用datagrid模拟了DropDownList。由于是用js控制datagrid项的选择，所以需要在js中设置对应dropdownlist的项为selected document.getElementById(ddlGetTicketCity).value =this.cell
C#无法获取asp:DropDownList的选中值的解决办法
今天在修改以前的asp项目时遇到一个很莫名其妙的问题，编辑表单数据保存后就再也无法修改其中的asp:DropDownList的值，只有第一次保存可以正确取到值，之后再修改无论如何也更改不了它的选中值，百度了半天才发现原来asp是每次都会Post数据都会执行Page_Load方法，而由于我将FillFrom方法写在了if(!IsPostBack)外面导致提交保存的时候，又重新执行了FillFrom方...
JavaScript

87,907

社区成员

224,615

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章