Html
    Css
    Js

    
                        
.ch_area {
	background:#fff;
	padding-bottom:8px;
}
.choose_box {
	width:90%;
	margin:0px auto;
	border:1px solid #ccc;
	border-radius:5px;
	min-height:40px;
	line-height:40px;
	padding-left:15px;
}
.choosed_area {
	border:1px solid #ccc;
	border-radius:5px;
	float:left;
	height:30px;
	line-height:30px;
	margin-top:5px;
	margin-right:5px;
}
.chooselist {
	width:90%;
	margin:0px auto;
	display:none;
}
.input_list {
	height:30px;
	width:100%;
	border:none;
	outline:none;
	line-height:30px;
}
.arealist {
	border-radius:5px;
	max-height:245px;
	overflow-y:scroll;
	font-size:14px;
	color:#505050;
	line-height:40px;
	-moz-box-shadow:-3px 3px 5px rgba(0,0,0,.1);
	text-align:left;
	-webkit-box-shadow:-3px 3px 5px rgba(0,0,0,.1);
	box-shadow:-3px 3px 5px rgba(0,0,0,.1);
}
.arealist li {
	border-bottom:1px solid #ddd;
	font-size:14px;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	text-align:center;
	width:90%;
	margin:0 auto;
	color:#505050;
}
.sortnum {
	border-radius:100%;
	border:1px solid #E02E24;
	color:#E02E24;
	float:left;
	height:18px;
	width:18px;
	line-height:18px;
	text-align:center;
	font-size:12px;
	margin:5px;
}
.area_name {
	float:left;
}
.img {
	float:left;
	height:18px;
	width:18px;
	margin:6px;
}
.img img {
	float:left;
	height:20px;
	width:20px;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.1.1
 立即下载

动态多选下拉框

1、本模块可用于选择多个小区或其它选项,并且排序;
2、已选的选项可删除并根据选择的先后顺序重新排序,删除后将其添加到未选择的下拉列表;
3、提供向后端提供的数据,本模块将其打包成一个数组,调用getaeaarr()可获取该数组.

0