这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了 js select 实现省市区联动选择效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
最近整了一一些表单类的移动页面,遇到了一个省市区的联动选择,本来想着用公用库里面的以前 pc 端的省市区选择组件,但是发现 pc 端的效果在手机端用效果太不理想,设计没给出具体的设计效果,只好自己整了 select 原生的省市区选择效果,样式使用手机自带的效果,感觉样式效果凑合还能用,数据还是用的 pc 的数据,只是把组件的给重写了一下,代码效果如下:
- var $ = require('jquery'),
- $window = $(window),
- data = require('./data-new'),
- $doc = $(document);
- var __DEFAULTS__ = {
- wrap: '',
- itemName: ['省', '市', '区/县'],
- items: ['province', 'city', 'area'],
- callback: function(field, index) {} // 点击切换得时候才会执行
- };
- function Area(options) {
- options = $.extend({},
- __DEFAULTS__, options);
- var that = this;
- that.wrapper = $(options.wrap);
- that.selectArr = that.wrapper.data('default') ? that.wrapper.data('default').split(',') : [110000, 110100, 110101]; //
- that.items = options.items;
- that.itemName = options.itemName;
- that.callback = options.callback;
- that.setValue();
- that.events();
- that.
- default = that.wrapper.data('default'); //默认输出省市区的id
- that.validinput = $("#default-area");
- var validval = that.
- default !== undefined ? that.
- default:
- '';
- that.validinput.val(validval);
- }
- Area.prototype = {
- constructor: Area,
- //创建select,输出相应的数据
- createItems: function(itemname, data, selectId) {
- var that = this;
- //如果默认的defalut值没输出,则默认的给select添加相应的填写提示
- var html = '<select name="' + itemname + '">' + (that.
- default === undefined ? '<option value="' + itemname + '" selected ="selected">' + that.itemName[that.index] + '</option> ': '');
- for (var k in data) {
- html += '<option value ="' + data[k].id + '"' + (selectId === data[k].id ? 'selected = "selected"': '') + '>' + data[k].name + '</option>';
- }
- html += '</select>';
- return html;
- },
- //设置初始值
- setValue: function() {
- var that = this,
- html = '';
- $.each(that.selectArr,
- function(index, k) {
- that.index = index;
- html += that.createItems(that.items[index], that.getData(that.items[index], that.selectArr[index - 1]), k);
- }) that.wrapper.append(html)
- },
- //获取数据
- getData: function(type, pid) {
- if (type === 'province') {
- return data.provinces || []; // 省份信息不需要pid
- }
- if (type === 'city') {
- return data.cities[pid] || [];
- }
- if (type === 'area') {
- return data.areas[pid] || [];
- }
- },
- //获取select索引值
- getItemIndex: function(type) {
- var that = this;
- for (var i = 0,
- l = that.items.length; i < l; i++) {
- if (that.items[i] == type) {
- return i;
- }
- }
- },
- //触发change时候,select下一位值重新初始化
- setItemVal: function(select) {
- var that = this;
- var $this = select,
- previd = $this.val(),
- $type = $this.attr('name'),
- $nxtType = '';
- if ($type != 'area') {
- $nxtType = that.items[that.getItemIndex($type) + 1];
- var data = that.getData($nxtType, previd),
- html = that.createItems($nxtType, data, previd),
- nextSelect = $('select[name="' + $nxtType + '"]');
- if ($this.siblings('select[name="' + $nxtType + '"]').length > 0) {
- nextSelect.remove();
- }
- $this.after(html);
- nextSelect.find('option:first').prop('selected', true);
- $('select[name="' + $nxtType + '"]').trigger('change');
- } else {
- that.validinput.val($this.val()).trigger('validate')
- }
- that.index = that.getItemIndex($type);
- //触发change后可以设置回调函数
- if (that.callback) {
- that.callback.call(this, select, that.getItemIndex($type));
- }
- },
- events: function() {
- var that = this;
- //select change事件
- $doc.on('change', '.area-container select',
- function() {
- that.setItemVal($(this));
- })
- }
- }
- module.exports = Area;
html 代码:
- <input type="hidden" name="defaultArea" value="" id="default-area">
- //必填项,为了添加验证触发验证用
- <div class="area-container" data-default="">
- </div>
来源: http://www.phperz.com/article/17/0522/332286.html