下拉选择
需要先引入相关的CSS和JS文件：
<link rel="stylesheet" type="text/css" href="static/css/aui.min.css"/>
<link rel="stylesheet" type="text/css" href="static/css/aui.selectmenu.css"/>
<script src="static/js/aui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="static/js/aui.selectmenu.js" type="text/javascript" charset="utf-8"></script>
示例代码
<div class="container">
<header class="aui-header">
<a class="aui-header-left" onclick="aui.closeWin()"><i class="iconfont iconreturn"></i></a>
<div class="aui-header-title">selectmenu下拉选择</div>
</header>
<div class="aui-content">
<!--顶部筛选-->
<div class="orderby-items row-after">
<div class="orderby-item" onclick="changeOrderby(this, 1)"><span>一级列表</span><i class="iconfont icondown1"></i></div>
<div class="orderby-item" onclick="changeOrderby(this, 2)"><span>二级列表</span><i class="iconfont icondown1"></i></div>
<div class="orderby-item" onclick="changeOrderby(this, 3)"><span>三级列表</span><i class="iconfont icondown1"></i></div>
</div>
</div>
</div>
<script type="text/javascript">
window.addEventListener("load", function(){
});
var isShowModal = false, currentLayer = null;
function changeOrderby(is, layer){
if(isShowModal){
isShowModal = false;
for(var i = 0; i < is.parentNode.querySelectorAll('.orderby-item').length; i++){
is.parentNode.querySelectorAll('.orderby-item')[i].classList.remove('active');
}
aui.selectMenu.close();
}
else{
if(currentLayer != layer){
aui.selectMenu.remove();
currentLayer = layer;
}
for(var i = 0; i < is.parentNode.querySelectorAll('.orderby-item').length; i++){
is.parentNode.querySelectorAll('.orderby-item')[i].classList.remove('active');
}
is.classList.add('active');
isShowModal = true;
var data = [
{value: '0', text: '昨天'},
{value: '1', text: '本周'},
{value: '2', text: '上周'},
{value: '3', text: '本月'},
{value: '4', text: '上月'},
];
switch (layer){
case 1:
openOneSelectMenu(is, layer, data);
break;
case 2:
openTwoSelectMenu(is, layer, data);
break;
case 3:
openThreeSelectMenu(is, layer, data);
break;
default:
break;
}
}
}
//一级列表
function openOneSelectMenu(is, layer, data){
aui.selectMenu.open({
warp: '.orderby-items',
layer: layer, // 1,2,3...
style: {
itemStyle: {
textAlign: 'center',
}
},
data: data,
}, function(ret){
isShowModal = false;
for(var i = 0; i < is.parentNode.querySelectorAll('.orderby-item').length; i++){
is.parentNode.querySelectorAll('.orderby-item')[i].classList.remove('active');
}
aui.selectMenu.close(function(){
if(ret && ret.status == 0){
console.log(ret);
if(ret.data.length > 0){
is.classList.add("selected");
is.querySelector("span").innerText = '';
for(var i = 0; i < ret.data[ret.data.length-1].length; i++){
if(i != ret.data[ret.data.length-1].length - 1){
is.querySelector("span").innerText += ret.data[ret.data.length - 1][i].text + ',';
}
else{
is.querySelector("span").innerText += ret.data[ret.data.length - 1][i].text
}
}
}
else{
is.classList.remove("selected");
is.querySelector("span").innerText = '一级列表';
}
}
});
});
}
//二级列表
function openTwoSelectMenu(is, layer, data){
aui.selectMenu.open({
warp: '.orderby-items',
layer: layer, // 1,2,3...
data: data,
select: function(ret){ //点击时获取下级数据
console.log(ret); //{value: '0', text: '昨天'}
if(ret.pindex == 0){
//ajax -- 参数如ret.value
var data = [
{value: '1', text: '1点'},
{value: '2', text: '2点'},
{value: '3', text: '3点'},
{value: '4', text: '4点'},
{value: '4', text: '5点'},
{value: '4', text: '6点'},
{value: '4', text: '7点'},
{value: '4', text: '8点'},
{value: '4', text: '9点'},
{value: '4', text: '10点'},
{value: '4', text: '11点'},
{value: '4', text: '12点'},
];
}
return data;
},
}, function(ret){
isShowModal = false;
for(var i = 0; i < is.parentNode.querySelectorAll('.orderby-item').length; i++){
is.parentNode.querySelectorAll('.orderby-item')[i].classList.remove('active');
}
aui.selectMenu.close(function(){
if(ret && ret.status == 0){
console.log(ret);
if(ret.data.length > 0){
is.classList.add("selected");
is.querySelector("span").innerText = '';
for(var i = 0; i < ret.data[ret.data.length-1].length; i++){
if(i != ret.data[ret.data.length-1].length - 1){
is.querySelector("span").innerText += ret.data[ret.data.length - 1][i].text + ',';
}
else{
is.querySelector("span").innerText += ret.data[ret.data.length - 1][i].text
}
}
}
else{
is.classList.remove("selected");
is.querySelector("span").innerText = '二级列表';
}
}
});
});
}
//三级列表
function openThreeSelectMenu(is, layer, data){
aui.selectMenu.open({
warp: '.orderby-items',
layer: layer, // 1,2,3...
data: data,
checkedMore: true,
select: function(ret){ //点击时获取下级数据
//console.log(ret); //{value: '0', text: '昨天'}
if(ret.pindex == 0){
//ajax -- 参数如ret.value
var data = [
{value: '1', text: '1点'},
{value: '2', text: '2点'},
{value: '3', text: '3点'},
{value: '4', text: '4点'},
{value: '4', text: '5点'},
{value: '4', text: '6点'},
{value: '4', text: '7点'},
{value: '4', text: '8点'},
{value: '4', text: '9点'},
{value: '4', text: '10点'},
{value: '4', text: '11点'},
{value: '4', text: '12点'},
];
}
else if(ret.pindex == 1){
var data = [
{value: '0', text: '10分'},
{value: '1', text: '20分'},
{value: '2', text: '30分'},
{value: '3', text: '40分'},
{value: '4', text: '50分'},
{value: '4', text: '60分'},
];
}
return data
},
}, function(ret){
isShowModal = false;
for(var i = 0; i < is.parentNode.querySelectorAll('.orderby-item').length; i++){
is.parentNode.querySelectorAll('.orderby-item')[i].classList.remove('active');
}
aui.selectMenu.close(function(){
if(ret && ret.status == 0){
console.log(ret);
if(ret.data.length > 0){
is.classList.add("selected");
is.querySelector("span").innerText = '';
for(var i = 0; i < ret.data[ret.data.length-1].length; i++){
if(i != ret.data[ret.data.length-1].length - 1){
is.querySelector("span").innerText += ret.data[ret.data.length - 1][i].text + ',';
}
else{
is.querySelector("span").innerText += ret.data[ret.data.length - 1][i].text
}
}
}
else{
is.classList.remove("selected");
is.querySelector("span").innerText = '三级列表';
}
}
});
});
}
</script>