92 lines
3.1 KiB
Markdown
92 lines
3.1 KiB
Markdown
# 地区选择
|
|
|
|
> 注意匹配ID
|
|
|
|
## 表单
|
|
|
|
css
|
|
|
|
```css
|
|
.select-area {position: relative;}
|
|
.select-area #areaName {width: 64%}
|
|
.select-area .select-btn {position: absolute; top: 0px; right: 0px; width: 36%; border-color: #e6e6e6;}
|
|
.select-area .select-btn button {height: 38px; width: 50%;}
|
|
```
|
|
|
|
html
|
|
|
|
```html
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label layui-form-label-up">选择地区</label>
|
|
<div class="layui-input-block layui-input-block-down select-area">
|
|
<input type="hidden" id="areaCode" name="areaCode">
|
|
<input type="text" id="areaName" name="areaName" class="layui-input" value="" placeholder="请选择地区" maxlength="255" readonly style="cursor:pointer;">
|
|
<div class="layui-btn-group select-btn">
|
|
<button type="button" id="areaSelectBtn" class="layui-btn layui-btn-sm layui-btn-primary" title="选择区域">
|
|
<i class="fa fa-circle-thin"></i>
|
|
</button>
|
|
<button type="button" id="areaCleanBtn" class="layui-btn layui-btn-sm layui-btn-primary" title="删除区域">
|
|
<i class="fa fa-times-circle"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
## 列表代码
|
|
|
|
css
|
|
|
|
```css
|
|
.table-select-area {position: relative; width: 200px;}
|
|
.table-select-area #areaName {width: 64%}
|
|
.table-select-area .select-btn {position: absolute; top: 0px; right: 0px; width: 36%; border-color: #e6e6e6;}
|
|
```
|
|
|
|
```html
|
|
<div class="layui-inline table-select-area">
|
|
<input type="hidden" id="areaCode">
|
|
<input type="text" id="areaName" class="layui-input search-item search-item-width-300" placeholder="选择地区" readonly>
|
|
<div class="layui-btn-group select-btn">
|
|
<button type="button" id="areaSelectBtn" class="layui-btn layui-btn-sm layui-btn-primary" title="选择区域">
|
|
<i class="fa fa-circle-thin"></i>
|
|
</button>
|
|
<button type="button" id="areaCleanBtn" class="layui-btn layui-btn-sm layui-btn-primary" title="删除区域">
|
|
<i class="fa fa-times-circle"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
## 事件
|
|
|
|
```javascript
|
|
$('#areaSelectBtn').on('click', function() {
|
|
top.dialog.open({
|
|
title: '选择地区',
|
|
url: top.restAjax.path('route/area/get-select?areaName={areaName}', [encodeURI($('#areaName').val())]),
|
|
width: '600px',
|
|
height: '225px',
|
|
onClose: function() {
|
|
var selectedAreaArray = top.dialog.dialogData.selectedAreaArray;
|
|
if(selectedAreaArray.length > 0) {
|
|
var areaCode = '';
|
|
var areaName = '';
|
|
areaCode = selectedAreaArray[selectedAreaArray.length - 1].areaCode;
|
|
for(var i = 0, item; item = selectedAreaArray[i++];) {
|
|
if(areaName) {
|
|
areaName += ' / ';
|
|
}
|
|
areaName += item.areaName;
|
|
}
|
|
$('#areaCode').val(areaCode);
|
|
$('#areaName').val(areaName);
|
|
}
|
|
}
|
|
})
|
|
});
|
|
$('#areaCleanBtn').on('click', function () {
|
|
$('#areaCode').val('');
|
|
$('#areaName').val('');
|
|
})
|
|
``` |