cxselect动态获取数据

1. 常规使用

# html: data-value默认值
<div id="cxselect">
    <select name="province" class="form-control province" data-first-title="请选择" data-first-value="0" data-value="{$data.province}">
    <select name="city" class="form-control city" data-first-title="请选择" data-first-value="0" data-value="{$data.city}">
    </select>
</div>

# js
var urlChina = 'js/cityData.min.json';
$('#cxselect').cxSelect({
    url: urlChina,
    selects: ['province', 'city'],
    jsonName: 'n',
    //jsonValue: 'id',
    emptyStyle: 'none'
});

2. 动态数据

# html: data-url动态数据源url地址；data-value默认值
<div id="cxselect" data-url="{$domain}{:url('Area/jsonData')}">
    <select name="province" class="form-control province" data-first-title="请选择" data-first-value="0" data-value="{$data.province}">
    <select name="city" class="form-control city" data-first-title="请选择" data-first-value="0" data-value="{$data.city}">
    </select>
</div>

#js
$('#cxselect').cxSelect({
    selects: ['province', 'city'],
    jsonName: 'n',
    // jsonValue: 'id',
    emptyStyle: 'none'
});

3. api动态数据

# html: data-value默认值
<div id="cxselect">
    <select name="province" class="form-control province" data-first-title="请选择" data-first-value="0" data-value="{$data.province}">
    <select name="city" class="form-control city" data-first-title="请选择" data-first-value="0" data-value="{$data.city}">
    </select>
</div>

# js
$('#cxselect').cxSelect({
    data:[],
    selects: ['province', 'city'],
    jsonName: 'n',
    jsonValue: 'id',
    emptyStyle: 'none'
}, function(api) {
    cxSelectApi = api;
});
$.ajax({
    url: 'http://www.pengpengzhiyou/area/api',
    type: 'GET',
    dataType: 'json'
}).done(function(data, textStatus, jqXHR) {
    cxSelectApi.setOptions({
        data: JSON.parse(data),
        selects: ['province', 'city'],
        jsonName: 'n',
        jsonValue: 'id',
        emptyStyle: 'none'
    });
}).fail(function(jqXHR, textStatus, errorThrown) {
});