动态下拉框多选效果

浏览：2192次- 评论：0次- 发布时间：2018-11-16

Html

Css


    请选择您要派送的小区(多选)
    
        
            
                
                    1
                
                
                    清江花园
                
                
                    
                
            
        

        
    
    
        
            香缇华府龙湖弗莱明戈
            香缇华府龙湖弗莱明戈
            绿地国际花都
            绿地国际花都
            中信未来城
            香门第
            海骏达一期
            海骏达二期
            清江别韵龙湖弗莱明戈
            美城云庭

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

filters();

function setstyle(selector, keywords) {
    selector.html(function(i, oldHTML) {
        return oldHTML.replace(keywords, '<font style="color:red">' + keywords + '</font>');
    })
}

function backstyle(areatext, selector) {
    var str = areatext;
    var reg = /<[^<>]+>/g;
    var newarea = str.replace(reg, '');
    selector.text(newarea)
}

function getaeaarr() {
    var areaarr = [];
    $(".area_name").each(function(i, ele) {
        areaarr.push($(ele).text().trim())
    })
    console.log(areaarr)
    return areaarr;
}

↑上面代码改变，会自动显示代码结果

jQuery调用版本：2.1.1

立即下载收藏

积分说明：注册即送10牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！充值积分充值会员更多说明»

代码描述：在下拉框中选择多个选项添加到已选框同时移除下拉框中已选的选项已选框的选项可删除

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

讨论这个常用代码（0）回答他人问题或分享心得会奖励牛币

〒_〒居然一个评论都没有……

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取