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