jquery-cxSelect-联级选择插件-重新赋值

cxSelect初始化时可以试用data-value赋值，产生初始值。

如果需要动态赋值并更新，就需要先给<select>的data-value赋值，再调用attach()接口，意思是重新绑定html。

重新赋值示例如下（省略css）：

<div class="wrap">
    <h1>jQuery cxSelect 多级联动下拉菜单</h1>
    <h2>示例</h2>
    <fieldset id="city_china">
        <legend>默认</legend>
        <p>省份：<select class="state" name="state" data-value=""></select></p>
        <p>城市：<select class="city" name="city" data-value=""></select></p>
        <p>地区：<select class="region" name="region" data-value=""></select></p>
    </fieldset>
    <fieldset id="city_china">
        <legend>重新赋值</legend>
        <form name="form" action="">
            <p>省份：<input type="text" name="state_input" value="广东"></p>
            <p>城市：<input type="text" name="city_input" value="汕头市"></p>
            <p>地区：<input type="text" name="region_input" value="金平区"></p>
        </form>
        <button id="set-new" type="button">设置新的值</button>
    </fieldset>
</div>
<script src="http://www.jq22.com/jquery/2.1.1/jquery.min.js"></script>
<script src="js/jquery.cxselect.min.js"></script>
<script src="js/area.js"></script>
<script>
$(document).ready(function() {
    var cxSelectApi;
    $("#city_china").cxSelect({
        selects: ["state", "city", "region"],  // 各个字段名要和html的class名相对应
        data: AREADATA, // area.js引入的地区数据
        // jsonValue: "v", // 这里不能设置，否则赋值会失效
        emptyStyle: "none" // 下拉框为空值时不显示
    }, function(api) {
      cxSelectApi = api;
    });
    $('#set-new').click(function(){
        $('[name="state"]').attr('data-value', form.state_input.value); // 赋值
        $('[name="city"]').attr('data-value', form.city_input.value); // 赋值
        $('[name="region"]').attr('data-value', form.region_input.value); // 赋值
        cxSelectApi.attach(); // 重新绑定
    })
});
</script>

效果：

 

 demo下载地址：https://pan.baidu.com/s/1CJc3rq6p7SFgIRIUn1Pexg

比较全面的文档地址：https://www.npmjs.com/package/cxselect