Jquery Select2 使用纪要

Stella981
• 阅读 690
<div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="control-label">分支机构所在省</label>
                            <div class="controls">
                                <%--     <s:select name="branchProvince" list="regionProvinceMap" requiredLabel="true" /> --%>
                                <s:textfield name="masterBranch.branchProvince"
                                    requiredLabel="true" />
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="control-label">所在市</label>
                            <div class="controls">
                                <s:textfield name="masterBranch.branchCity" requiredLabel="true" />
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="control-label">所在区县</label>
                            <div class="controls">
                                <s:textfield name="masterBranch.branchCounty"
                                    requiredLabel="true" />
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="control-label">详细地址</label>
                            <div class="controls">
                                <s:textfield name="masterBranch.branchAddres"
                                    requiredLabel="true" />
                            </div>
                        </div>
                    </div>
                </div>





var $branchProvince = $form
                                    .find("input[name='masterBranch.branchProvince']");
                            var $branchCity = $form
                                    .find("input[name='masterBranch.branchCity']");
                            var $branchCounty = $form
                                    .find("input[name='masterBranch.branchCounty']");

                            $branchProvince
                                    .select2({
                                        placeholder : "选择所在省",
                                        allowClear : true,
                                        minimumInputLength : 0,
                                        multiple : false,
                                        ajax : {
                                            url : WEB_ROOT
                                                    + "/sys/data-dict!findByPrimaryKey.json?primaryKey=ADMINISTRATIVE_REGION_CN",
                                            dataType : 'json',
                                            data : function(term, page) {
                                                return {
                                                    q : term
                                                };
                                            },
                                            results : function(data, page) {
                                                var rst = [];
                                                // 修改成合适的数据格式 [{id:text}]
                                                $.each(data, function(i, n) {
                                                    rst.push({
                                                        id : i,
                                                        text : n
                                                    });
                                                });
                                                return {
                                                    results : rst
                                                };
                                            }
                                        }
                                    });

                            $branchCity
                                    .select2({
                                        placeholder : "选择城市",
                                        allowClear : true,
                                        minimumInputLength : 0,
                                        multiple : false,
                                        ajax : {
                                            url : function() {
                                                var val = $branchProvince
                                                        .select2("val");
                                                if (val == '') {
                                                    return '#';
                                                }
                                                return WEB_ROOT
                                                        + "/sys/data-dict!findByPrimaryKey.json?primaryKey="
                                                        + val;
                                            },
                                            dataType : 'json',
                                            data : function(term, page) {
                                                return {
                                                    q : term
                                                };
                                            },
                                            results : function(data, page) {
                                                var rst = [];
                                                // 修改成合适的数据格式 [{id:text}]
                                                $.each(data, function(i, n) {
                                                    rst.push({
                                                        id : i,
                                                        text : n
                                                    });
                                                });
                                                return {
                                                    results : rst
                                                };
                                            }
                                        }
                                    });

                            $branchCounty
                                    .select2({
                                        placeholder : "选择区县",
                                        allowClear : true,
                                        minimumInputLength : 0,
                                        multiple : false,
                                        ajax : {
                                            url : function() {
                                                var val = $branchCity
                                                        .select2("val");
                                                if (val == '') {
                                                    return '#';
                                                }
                                                return WEB_ROOT
                                                        + "/sys/data-dict!findByPrimaryKey.json?primaryKey="
                                                        + val;
                                            },
                                            dataType : 'json',
                                            data : function(term, page) {
                                                return {
                                                    q : term
                                                };
                                            },
                                            results : function(data, page) {
                                                var rst = [];
                                                // 修改成合适的数据格式 [{id:text}]
                                                $.each(data, function(i, n) {
                                                    rst.push({
                                                        id : i,
                                                        text : n
                                                    });
                                                });
                                                return {
                                                    results : rst
                                                };
                                            }
                                        }
                                    });

                            $branchProvince.on("change", function(e) {
                                // alert("change "+JSON.stringify({val:e.val,
                                // added:e.added, removed:e.removed}));
                                $branchCity.select2('val', '');
                                $branchCounty.select2('val', '');
                            }).on("select2-removed", function(e) {
                                // alert("change "+JSON.stringify({val:e.val,
                                // added:e.added, removed:e.removed}));
                                $branchCity.select2('val', '');
                                $branchCounty.select2('val', '');
                            });

                            $branchCity.on("change", function(e) {
                                // alert("change "+JSON.stringify({val:e.val,
                                // added:e.added, removed:e.removed}));
                                $branchCounty.select2('val', '');
                            }).on("select2-removed", function(e) {
                                // alert("change "+JSON.stringify({val:e.val,
                                // added:e.added, removed:e.removed}));
                                $branchCounty.select2('val', '');
                            });

                        }
                    });

待续

点赞
收藏
评论区
推荐文章
Easter79 Easter79
3年前
vue+vue
<template<div<divclass"croppercontent"<divclass"cropper"<vueCropperref"cropper":img"option.img":outputSize"option.size":
Easter79 Easter79
3年前
vue 实现横向时间轴
效果:<template<!时间线<divclass"timeLine"style"overflow:hidden;"<divclass"content"<pclass"tit"{{timeLineList
Easter79 Easter79
3年前
vue 中使用vant
html<!TODO这是上传多张图<divclass"vercodebottomonerightcode"<divclass"postinguploaderitem"vfor"(item,index)inpostData":key"index"
昔不亏 昔不亏
3年前
「组件」侧边hover锚点导航双向绑定
样式如图:1:在components文件夹下新建SideAnchorNav.vuejs<template<divclass"sideAnchorNav"<divclass"leftnav":class"navText?'navHover':''"@mouseenter"navTexttrue"@mou
昔不亏 昔不亏
3年前
「Vue — 插件」PDF预览vue-pdf
样式如图:1:npminstallsavevuepdf2:在需要使用的页面中js<divclass"page"{{currentPage}}/{{pageCount}}</div<divclass"pdf"<span@click"changePdfPage(0)"class"arrow":class"{g
Wesley13 Wesley13
3年前
PHP自定义 日期范围 条件筛选
Html:<divclass\"layuiinline"\<labelclass\"layuiformlabel"\登录时间:</label\<divclass\"layuiinputinline"style\"width: 140px;"\<inputtype\"date"name\"date
Stella981 Stella981
3年前
AndroidStudio封装SDK的那些事
<divclass"markdown\_views"<!flowchart箭头图标勿删<svgxmlns"http://www.w3.org/2000/svg"style"display:none;"<pathstrokelinecap"round"d"M5,00,2.55,5z"id"raphael
Wesley13 Wesley13
3年前
thinkphp3.2.3模板渲染支持三元表达式
thinkphp3.2.3模板渲染支持三元表达式{$status?'正常':'错误'}{$info'status'?$info'msg':$info'error'}注意:三元运算符中暂时不支持点语法。如下:           <divclass"modalhidefade"id'myModa
Wesley13 Wesley13
3年前
JS省城级联
 这里是HTML内容<labelclass"controllabelcolmd2colsm3colxs12"购车城市<spanclass"required"</span</label<divclass"colmd2colsm3colxs12"
Stella981 Stella981
3年前
Bootstrap 手风琴搭配导航条实现常用菜单栏
效果!(http://static.oschina.net/uploads/img/201606/22000049_821N.png)HTML代码<divclass"sidebar"<divclass"mcsearch"<divclass