jquery.cxSelect插件,城市没单位

jquery.cxSelect插件,新增城市没单位也能显示出来的功能。

具体,请查看修改后的插件代码:(主要是FixNoUnit函数)

/*!
 * jQuery cxSelect
 * @name jquery.cxselect.js
 * @version 1.3.4
 * #date 2013-12-18
 * @author ciaoca
 * @email [email protected]
 * @site https://github.com/ciaoca/cxSelect
 * @license Released under the MIT license
 */
(function(factory){
    if (typeof define === ‘function‘ && define.amd) {
        define([‘jquery‘], factory);
    } else {
        factory(jQuery);
    };
}(function($){
    $.cxSelect = function(settings){
        var obj;
        var settings;
        var cxSelect = {
            dom: {},
            api: {}
        };

        // 检测是否为 DOM 元素
        var isElement = function(o){
            if(o && (typeof HTMLElement === ‘function‘ || typeof HTMLElement === ‘object‘) && o instanceof HTMLElement) {
                return true;
            } else {
                return (o && o.nodeType && o.nodeType === 1) ? true : false;
            };
        };

        // 检测是否为 jQuery 对象
        var isJquery = function(o){
            return (o && o.length && (typeof jQuery === ‘function‘ || typeof jQuery === ‘object‘) && o instanceof jQuery) ? true : false;
        };

        // 检测是否为数组
        var isArray = function(o){
            if(!Array.isArray) {
                return Object.prototype.toString.call(o) === "[object Array]";
            } else {
                return Array.isArray(o);
            };
        };

        // 分配参数
        for (var i = 0, l = arguments.length; i < l; i++) {
            if (isJquery(arguments[i])) {
                obj = arguments[i];
            } else if (isElement(arguments[i])) {
                obj = $(arguments[i]);
            } else if (typeof arguments[i] === ‘object‘) {
                settings = arguments[i];
            };
        };

        if (obj.length < 1) {return};

        cxSelect.init = function(){
            var _this = this;

            _this.dom.box = obj;

            _this.settings = $.extend({}, $.cxSelect.defaults, settings, {
                url: _this.dom.box.data(‘url‘),
                nodata: _this.dom.box.data(‘nodata‘),
                required: _this.dom.box.data(‘required‘),
                firstTitle: _this.dom.box.data(‘firstTitle‘),
                firstValue: _this.dom.box.data(‘firstValue‘)
            });

            // 未设置选择器组
            if (!_this.settings.selects.length) {return};

            _this.selectArray = [];
            _this.selectSum = _this.settings.selects.length;

            for (var i = 0; i < _this.selectSum; i++) {
                if (!_this.dom.box.find(‘select.‘ + _this.settings.selects[i])) {break};

                _this.selectArray.push(_this.dom.box.find(‘select.‘ + _this.settings.selects[i]));
            };

            _this.selectSum = _this.selectArray.length;

            // 设置的选择器组不存在
            if (!_this.selectSum) {return};

            // 设置 URL,通过 Ajax 获取数据
            if (typeof _this.settings.url === ‘string‘) {
                $.getJSON(_this.settings.url, function(json){
                    _this.dataJson = json;
                    _this.buildContent();
                });

            // 设置自定义数据
            } else if (typeof _this.settings.url === ‘object‘) {
                _this.dataJson = _this.settings.url;
                _this.buildContent();
            };
        };

        cxSelect.getIndex = function(n){
            return (this.settings.required) ? n : n - 1;
        };

        // 获取下拉框内容
        cxSelect.getNewOptions = function(elemJquery, data){
            if (!elemJquery) {return};

            var _title = this.settings.firstTitle;
            var _value = this.settings.firstValue;
            var _dataTitle = elemJquery.data(‘firstTitle‘);
            var _dataValue = elemJquery.data(‘firstValue‘);
            var _html = ‘‘;

            if (typeof _dataTitle === ‘string‘ || typeof _dataTitle === ‘number‘ || typeof _dataTitle === ‘boolean‘) {
                _title = _dataTitle.toString();
            };

            if (typeof _dataValue === ‘string‘ || typeof _dataValue === ‘number‘ || typeof _dataValue === ‘boolean‘) {
                _value = _dataValue.toString();
            };

            if (!this.settings.required) {
                _html=‘<option value="‘ + _value + ‘">‘ + _title + ‘</option>‘;
            };

            $.each(data, function(i, v){
                if (typeof(v.v) === ‘string‘ || typeof(v.v) === ‘number‘ || typeof(v.v) === ‘boolean‘) {
                    _html += ‘<option value="‘+v.v+‘">‘ + v.n + ‘</option>‘;
                } else {
                    _html += ‘<option value="‘+v.n+‘">‘ + v.n + ‘</option>‘;
                };
            });

            return _html;
        };

        // 构建选框内容
        cxSelect.buildContent = function(){
            var _this = this;

            _this.dom.box.on(‘change‘, ‘select‘, function(){
                _this.selectChange(this.className);
            });

            var _html = _this.getNewOptions(_this.selectArray[0], _this.dataJson);
            _this.selectArray[0].html(_html).prop(‘disabled‘, false).trigger(‘change‘);

            _this.setDefaultValue();
        };

        // 设置默认值
        cxSelect.setDefaultValue = function(n){
            n = n || 0;

            var _this = this;
            var _value;

            if (n >= _this.selectSum || !_this.selectArray[n]) {return};

            _value = _this.selectArray[n].data(‘value‘);

            //add by ycx --20160114//see FixNoUnit 函数
            //_value=FixNoUnit(_value);

            if (typeof _value === ‘string‘ || typeof _value === ‘number‘ || typeof _value === ‘boolean‘) {
                _value = _value.toString();

                setTimeout(function(){
                    _this.selectArray[n].val(_value).trigger(‘change‘);
                    n++;
                    _this.setDefaultValue(n);
                }, 1);
            };
        };

        // 改变选择时的处理
        cxSelect.selectChange = function(name){
            name = name.replace(/ /g,‘,‘);
            name = ‘,‘ + name + ‘,‘;

            var selectValues=[];
            var selectIndex;
            var selectNext;
            var selectData;
            var _html;

            // 获取当前 select 位置、选择值,并清空后面的 select
            for (var i = 0; i < this.selectSum; i++) {
                selectValues.push(this.getIndex(this.selectArray[i].get(0).selectedIndex));

                if (typeof selectIndex === ‘number‘ && i > selectIndex) {
                    this.selectArray[i].empty().prop(‘disabled‘, true);

                    if (this.settings.nodata === ‘none‘) {
                        this.selectArray[i].css(‘display‘, ‘none‘);
                    } else if(this.settings.nodata === ‘hidden‘) {
                        this.selectArray[i].css(‘visibility‘, ‘hidden‘);
                    };
                };

                if (name.indexOf(‘,‘ + this.settings.selects[i] + ‘,‘) > -1) {
                    selectIndex = i;
                };
            };

            // 获取下级的列表数据
            selectNext = selectIndex + 1;
            selectData = this.dataJson;

            for (var i = 0; i < selectNext; i++){
                if (typeof selectData[selectValues[i]]  === ‘undefined‘ || isArray(selectData[selectValues[i]].s) === false || !selectData[selectValues[i]].s.length) {
                    return;
                };
                selectData = selectData[selectValues[i]].s;
            };

            // 遍历数据写入下拉选框
            if (this.selectArray[selectNext]) {
                _html = this.getNewOptions(this.selectArray[selectNext], selectData);
                this.selectArray[selectNext].html(_html).prop(‘disabled‘, false).css({‘display‘:‘‘, ‘visibility‘:‘‘}).trigger(‘change‘);
            };
        };

        cxSelect.init();

        return this;
    };

    // 默认值
    $.cxSelect.defaults = {
        selects: [],            // 下拉选框组
        url: null,                // 列表数据文件路径,或设为对象
        nodata: null,            // 无数据状态
        required: false,        // 是否为必选
        firstTitle: ‘请选择‘,    // 第一个选项选项的标题
        firstValue: ‘0‘            // 第一个选项的值
    };

    $.fn.cxSelect = function(settings, callback){
        this.each(function(i){
            $.cxSelect(this, settings, callback);
        });
        return this;
    };

    /**
     * 修复 没有城市单位的bug
     * 也就是,如果输入是广东,广州,则显示不出来。因为json数据中,是有单位的:广东省,广州市。
     *
     * 下面代码,还没做完。不过,基本思路就是这样的了。
     *
     * @author ycx
     * @time 20160114
     *
     */
    var province = {};
    var FixNoUnit = function(value) {
        if (province.bj === true) {//北京
            if (value.indexOf(‘密云‘) >= 0 || value.indexOf(‘延庆‘) >= 0) {
                value += ‘县‘;
            } else {
                value += ‘区‘;
            }
            province.bj = false;
        } else if (province.tj === true) {//天津
            if (value.indexOf(‘静海‘) >= 0 || value.indexOf(‘蓟‘) >= 0) {
                value += ‘县‘;
            } else {
                value += ‘区‘;
            }
            province.tj = false;
        } else if (province.hb === true) {//河北
            value += ‘市‘;
            province.hb = false;
        } else if (province.sx === true) {//山西
            value += ‘市‘;
            province.tj = false;
        } else if (province.nmg === true) {//内蒙古
            if (value.indexOf(‘兴安‘) >= 0 || value.indexOf(‘锡林郭勒‘) >= 0 || value.indexOf(‘阿拉善‘) >= 0) {
                value += ‘盟‘;
            } else {
                value += ‘市‘;
            }
            province.nmg = false;
        } else if (province.ln === true) {//辽宁
            value += ‘市‘;
            province.ln = false;
        } else if (province.jl === true) {//吉林
            if (value.indexOf(‘延边朝鲜族‘) >= 0) {
                value += ‘自治州‘;
            } else {
                value += ‘市‘;
            }
            province.jl = false;
        } else if (province.hlj === true) {//黑龙江
            if (value.indexOf(‘大兴安岭‘) >= 0) {
                value += ‘地区‘;
            } else {
                value += ‘市‘;
            }
            province.hlj = false;
        }
        //还有其他省份...

        if (value === ‘北京‘) {
            value += ‘市‘;
            province.bj = true;
        } else if (value === ‘天津‘) {
            value += ‘市‘;
            province.bj = true;
        } else if (value === ‘河北‘) {
            value += ‘省‘;
            province.hb = true;
        } else if (value === ‘山西‘) {
            value += ‘省‘;
            province.sx = true;
        } else if (value === ‘内蒙古‘) {
            value += ‘自治区‘;
            province.nmg = true;
        } else if (value === ‘辽宁‘) {
            value += ‘省‘;
            province.ln = true;
        } else if (value === ‘吉林‘) {
            value += ‘省‘;
            province.jl = true;
        } else if (value === ‘黑龙江‘) {
            value += ‘省‘;
            province.hlj = true;
        }
        //还有其他省份...

        return value;
    };
}));
时间: 2024-08-12 17:30:20

jquery.cxSelect插件,城市没单位的相关文章

jQuery幻灯片插件Skippr

Skippr是一款带左右箭头,索引按钮,滑动切换效果并且轻量.快速的幻灯片 设置 引入jquery.skippr.css.jquery.js.jquery.skippr.js 注意jQuery必须在jquery.skippr.js之前 <head> <link href="css/jquery.skippr.css" rel="stylesheet" type="text/css" > <script src=&qu

jQuery Validate 插件,表单验证功能

连接地址:http://www.w3cschool.cc/jquery/jquery-plugin-validate.html jQuery Validate jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API.所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言. 该插件是由 Jör

jQuery.stickUp插件重构

stickUp插件用于实现固定菜单栏效果,原理很简单,说白了就是监听document的scroll事件,滚动到特定值时,将特定元素的position设置为fixed,核心代码如下: 1 $(document).on('scroll', function() { 2 varscroll = parseInt($(document).scrollTop()); 3 if (menuSize != null) { 4 for (var i = 0; i < menuSize; i++) { 5 con

分享在MVC3.0中使用jQuery DataTable 插件

前不久在网络上看见一个很不错的jQuery的DataTable表格插件.后来发现在MVC中使用该插件的文章并不多.本文将介绍在MVC3.0如何使用该插件.在介绍该插件之前先简单介绍一下,推荐该插件的原因.在项目中我使用jqgrid比较多.但是发现当进行样式调整时jqgrid的样式常常会让美工头疼.而datatable插件却是一个轻量级的jQuery插件.当我通过浏览器查看该js插件rander后的源码.发现只是一个简单的html table,非常简洁.那么在没有特殊要求的情况下使用这个插件,开发

jquery星级插件、支持页面中多次使用

我从网上收集一个jquery星级插件的,它只支持一个页面中使用一次,多次使用的话会发生冲突,达不到我项目的需求,没办法,只能修改它, 效果图如下: css所需背景图片:   二话不说,帖代码: html代码 <div class="xing"> <span style="float: left">总体评价:<font color="#CC3300" size="-1">*</font&

新鲜出炉的jquery fileupload 插件

内容属原创,转载请注明出处 为什么做这个东东 项目中需要用到一个多附件上传的控件,找了一圈没找到中意的(唯一一个中意点的还不开源,费用比较高),这不,只得自己抡刀上了. 需求是什么 这么个上传的东东,要做哪些事情呢? 必须要干的事情: 1. 不能太丑,可以很素. 原生的input file实在和项目主体不太搭配,需要另外想办法. 2. 需要支持上传多个附件,比如后台有个字段叫做 影像资料,这个影像资料,也许就是一张正面照,也许,还有一堆的证件照,需要支持多个. 3. 需要一个页面上支持多个这样的

AudioPlayer.js,一个响应式且支持触摸操作的jquery音频插件

AudioPlayer.js是一个响应式.支持触摸操作的HTML5 的音乐播放器.本文是对其官网的说用说明文档得翻译,博主第一次翻译外文.不到之处还请谅解.之处. JS文件地址:http://osvaldas.info/examples/audio-player-responsive-and-touch-friendly/audioplayer.js 你可以在右键点击上面的地址,然后选择另存为把JS文件保存到本地. 英文原文地址:http://osvaldas.info/audio-player

适合移动手机使用的jQuery幻灯片插件

jflex是一款小巧的适合移动手机使用的jQuery幻灯片插件.该幻灯片插件支持移动触摸,支持鼠标拖拽切换,还支持带进度条的自动播放模式.它是否的小球,使用非常简单. 在线预览   源码下载 使用方法 使用该幻灯片插件需要引入jQuery,jflex.min.js和jflex.min.css文件. 1 2 3 <link rel="stylesheet" href="css/jflex.min.css" type="text/css">

jQuery cxSelect 多级联动下拉菜单

随着电商热门,这种多层次的互动更充分地体现在下拉菜单,最明显的是多级联动地址下拉选择,因此,这里是一个简单的分享 jQuery cxSelect 多级联动下拉菜单 cxSelect 它是基于 jQuery 多级联动菜单插件.它适用于各省.动菜单. 列表数据通过 AJAX 获取(须要在server环境执行),也能够使用变量自己定义,数据内容使用 JSON 格式. 提供国内省市县数据(数据来源:basecss/cityData Date: 2014.03.31) 个人一直都有习惯,当有新知识点须要学