#### `selectmenu下拉列表選擇菜單`
[預覽](https://aui-js.github.io/aui/pages/api/plugs/selectmenu.html) </br>
參數 | 類型 | 描述 | 默認值 | 必選
---- | ----- | ------ | ----- | ----
warp | string | 父容器元素 | 'body' | 否
data | arr | 菜單列表[{value: '', text: ''}] | [] | 是
layer | number | 控制組件為幾級 | 1 | 是
mask | boolean | 是否顯示遮罩蒙版 | true | 否
touchClose | boolean | 觸摸遮罩是否關閉側滑菜單 | true | 否
checkedMore | boolean | 是否多選(多選限制最后一級可多選) | false | 否
before | function | 打開彈窗前執行 | null | 否
select | function | 一級以上點擊選擇后執行，獲取下級數據并return | null | 否
style | object | 樣式 | {</br>width: '',</br> height: '',</br> top: '',</br> left: '',</br> padding: '',</br> background: '',</br> borderRadius: '',</br> itemStyle:{</br>textAlign: '',</br>fontSize: '',</br>color: '',</br>isLine: false, //是否顯示分割線</br>}</br>} | 否
````html
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.selectmenu.css"/>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.min.js"></script>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.selectmenu.js"></script>
````
> 打開：
````javascript
aui.selectMenu.open({
warp: '.orderby-items',
layer: layer, // 1,2,3...
data: [
{value: '0', text: '昨天'},
{value: '1', text: '本周'},
{value: '2', text: '上周'},
{value: '3', text: '本月'},
{value: '4', text: '上月'},
],
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');
}
});
````
> 關閉
````javascript
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 = '三級列表';
}
}
});
````
