jquery-cxSelect- cascade select the plug - re-assignment

cxSelect trial data-value can be assigned during initialization, the initial value is generated.

If you need to update and dynamic assignment, we need to give the assignment data-value <select>, and then call the attach () interfaces, which means rebind html.

Example reassigned as follows (not css):

< Div class = "wrap" > 
    < h1 of > the jQuery cxSelect multi level interaction drop-down menu </ h1 of > 
    < H2 > Example </ H2 > 
    < the fieldset ID = "city_china" > 
        < Legend > Default </ Legend > 
        < P > provinces : < SELECT class = "State" name = "State" Data-value = "" > </ SELECT > </ P >
        < The p- > City:<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() {
    varcxSelectApi; 
    $ ( " #city_china " ) .cxSelect ({ 
        Selects: [ " State " , " City " , " Region " ],   // the respective field names and class names to the corresponding html 
        Data: AREADATA, // Area. js incoming data area 
        // JsonValue: "V", // not set here, otherwise the assignment will fail 
        : emptyStyle " none "  // is not displayed when the drop-down box blank value 
    }, 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();</
});    })rebinding//

script>

effect:

 

 Download demo: https://pan.baidu.com/s/1CJc3rq6p7SFgIRIUn1Pexg

A more comprehensive document Address: https://www.npmjs.com/package/cxselect