# 地区选择

> 注意匹配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('');
})
```