技术笔记

一名已转行的程序员
当前位置:网站首页 / 代码笔记 / 正文

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

2024-02-07 / 代码笔记 / 3480 次围观 / 0 次吐槽

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>

源码下载:http://code.ciaoca.com/jquery/cxSelect/

推荐您阅读更多有关于“”的文章

本站所有文章如无特别注明均为原创。作者:程序员小邓 ,复制或转载请以超链接形式注明转自 技术笔记
原文地址《jquery-cxSelect-联级选择插件-重新赋值
额 本文暂时没人评论 来添加一个吧

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Powered By Z-BlogPHP

Copyright 技术笔记 Rights Reserved.