jQuery weui Select组件显示指定值

jQuery weui有个支持单选或者多选的select弹出层，默认他是这样的

第2部分选择什么值，第1部分就显示什么值，一般的场景支持是没问题了，但本次开发碰到了一个问题。

需求描述：

职业名称后面要显示一些描述，如“法官 2个案件在审理”，“医生正在做手术”，同时要求点击对应项时，只显示“法官”，“医生”而不显示剩余的描述，根据select现有的逻辑是无法实现这个功能的。只能实现选项是什么，显示的值就是什么，不明白，看下图

解决方案：

查看官方文档，数据通过title和value进行控制，title是显示的值，value一般用于给后端传值

$("#mobile").select({title: "选择职业",items: [{title: "法官 2个案件在审理",value: "001",},{title: "医生 正在做手术",value: "002",}]
});

很明显我们是可以通过修改items项的配置来实现该需求：

1、首先修改配置项

$("#mobile").select({title: "选择职业",items: [{title: "法官 2个案件在审理",showTitle: "医生",value: "001",},{title: "医生 正在做手术",showTitle: "医生",value: "002",}]
});

showTitle用于回显

2、下面修改jquery.weui.js大概从4695到4998行，Select组件封装在一个函数体中，这样避免变量污染同时也方便管理，大概有5个地方涉及到该需求，一个个来看：

   2.1、Select.prototype.updateInputValue方法，该方法用于更新你点击的那个input的值及给他设置一个data-values值，这里有两个地方需要修改原来的代码：

Select.prototype.updateInputValue = function(values, titles) {var v, t;if(this.config.multi) {v = values.join(this.config.split);t = titles.join(this.config.split);} else {v = values[0];t = titles[0];}

　　修改后的代码：

Select.prototype.updateInputValue = function(values, titles, showtitles) {var v, t, s;if(this.config.multi) {v = values.join(this.config.split);t = titles.join(this.config.split);s = showtitles.join(this.config.split);} else {v = values[0];t = titles[0];s = showtitles[0];}

　　新增了一个形参，同时对该形参进行了处理

原来的代码

this.$input.val(t).data("values", v);
this.$input.attr("value", t).attr("data-values", v);

　　修改后的代码

this.$input.val(s).data("values", v);
this.$input.attr("value", s).attr("data-values", v);

　　可以发现input的值不再是原来的值，改成了配置项showTitle的值

　　2.2、Select.prototype.parseInitValue方法，该方法用于反显，也就是你上次选值后再次调用select要把选中的部分给选上，整个方法更新如下：

Select.prototype.parseInitValue = function() {var value = this.$input.val();var items = this.config.items;var dataVales = this.$input.attr('data-values')//如果input为空，只有在第一次初始化的时候才保留默认选择。因为后来就是用户自己取消了全部选择，不能再为他选中默认值。if( !this._init && (value === undefined || value == null || value === "")) return;var titles = this.config.multi ? value.split(this.config.split) : [value];var vals = this.config.multi ? dataVales.split(this.config.split) : [dataVales];// 建议以值来判断哪些要处于选中状态，以文本来判断有太多不确定因素，如值多了/少个空格if(vals || vals.length > 0) {for(var i=0;i<items.length;i++) {items[i].checked = false;for(var j=0;j<vals.length;j++) {if(parseInt(items[i].value) === parseInt(vals[j])) {items[i].checked = true;}}}} else {for(var i=0;i<items.length;i++) {items[i].checked = false;for(var j=0;j<titles.length;j++) {if(items[i].title === titles[j]) {items[i].checked = true;}}}}}

　　根据文档我们知道data-values一般存储发送给后台的id值，用id值来做比较是最靠谱的，通过文本值来判断就未必了，多一个空格少个空格都不相等

　　2.3、Select.prototype._bind这是绑定事件的入口，整体修改如下：

Select.prototype._bind = function(dialog) {var self = this,config = this.config;dialog.on("change", function(e) {var checked = dialog.find("input:checked");var values = checked.map(function() {return $(this).val();});var titles = checked.map(function() {return $(this).data("title");});var showTitles = checked.map(function() {return $(this).data("showtitle");});self.updateInputValue(values, titles, showTitles);if(config.autoClose && !config.multi) self.close();}).trigger('change').on("click", ".close-select", function() {self.close();});}

　　作用就是给目标附加一个data-showtitle属性，值就是配置项里showTitle的值

　　2.4、Select.prototype.getHTML该方法用于生成模板，修改如下：

Select.prototype.getHTML = function(callback) {var config = this.config;return this.tpl({items: config.items,title: config.title,showtitle: config.showTitle,closeText: config.closeText})
}

　　依葫芦画瓢，新增了一个showtitle属性，用于模板中显示用

　　2.5、defaults = $.fn.select.prototype.defaults配置项，此处要修改的是模板部分，修改如下：

toolbarTemplate: '<div class="toolbar">\<div class="toolbar-inner">\<a href="javascript:;" class="picker-button close-select">{{closeText}}</a>\<h1 class="title">{{title}}</h1>\</div>\</div>',radioTemplate:'<div class="weui-cells weui-cells_radio">\{{#items}}\<label class="weui-cell weui-check_label" for="weui-select-id-{{this.title}}">\<div class="weui-cell__bd weui-cell_primary">\<p>{{this.title}}</p>\</div>\<div class="weui-cell__ft">\<input type="radio" class="weui-check" name="weui-select" id="weui-select-id-{{this.title}}" value="{{this.value}}" {{#if this.checked}}checked="checked"{{/if}} data-showtitle="{{this.showTitle}}" data-title="{{this.title}}">\<span class="weui-icon-checked"></span>\</div>\</label>\{{/items}}\</div>',checkboxTemplate:'<div class="weui-cells weui-cells_checkbox">\{{#items}}\<label class="weui-cell weui-check_label" for="weui-select-id-{{this.title}}">\<div class="weui-cell__bd weui-cell_primary">\<p>{{this.title}}</p>\</div>\<div class="weui-cell__ft">\<input type="checkbox" class="weui-check" name="weui-select" id="weui-select-id-{{this.title}}" value="{{this.value}}" {{#if this.checked}}checked="checked"{{/if}} data-showtitle="{{this.showTitle}}" data-title="{{this.title}}" >\<span class="weui-icon-checked"></span>\</div>\</label>\{{/items}}\</div>',

　　没什么特别的，只是给模板新增了一个data-showtitle属性，用于回显，到此整个修改完成，最后附完整代码。

完整代码：

+ function($) {"use strict";var defaults;var selects = [];var Select = function(input, config) {var self = this;this.config = config;//init empty datathis.data = {values: '',titles: '',origins: [],length: 0};this.$input = $(input);this.$input.prop("readOnly", true);this.initConfig();config = this.config;this.$input.click($.proxy(this.open, this));selects.push(this)}Select.prototype.initConfig = function() {this.config = $.extend({}, defaults, this.config);var config = this.config;if(!config.items || !config.items.length) return;config.items = config.items.map(function(d, i) {if(typeof d == typeof "a") {return {title: d,value: d};}return d;});this.tpl = $.t7.compile("<div class='weui-picker-modal weui-select-modal'>" + config.toolbarTemplate + (config.multi ? config.checkboxTemplate : config.radioTemplate) + "</div>");if(config.input !== undefined) this.$input.val(config.input);this.parseInitValue();this._init = true;}Select.prototype.updateInputValue = function(values, titles, showtitles) {var v, t, s;if(this.config.multi) {v = values.join(this.config.split);t = titles.join(this.config.split);s = showtitles.join(this.config.split);} else {v = values[0];t = titles[0];s = showtitles[0];}//caculate origin datavar origins = [];this.config.items.forEach(function(d) {values.each(function(i, dd) {if(d.value == dd) origins.push(d);});});// this.$input.val(t).data("values", v); // 原来的this.$input.val(s).data("values", v);// this.$input.attr("value", t).attr("data-values", v); // 原来的this.$input.attr("value", s).attr("data-values", v);var data = {values: v,titles: t,valuesArray: values,titlesArray: titles,origins: origins,length: origins.length};this.data = data;this.$input.trigger("change", data);this.config.onChange && this.config.onChange.call(this, data);}Select.prototype.parseInitValue = function() {var value = this.$input.val();var items = this.config.items;var dataVales = this.$input.attr('data-values')//如果input为空，只有在第一次初始化的时候才保留默认选择。因为后来就是用户自己取消了全部选择，不能再为他选中默认值。if( !this._init && (value === undefined || value == null || value === "")) return;var titles = this.config.multi ? value.split(this.config.split) : [value];var vals = this.config.multi ? dataVales.split(this.config.split) : [dataVales];// 建议以值来判断哪些要处于选中状态，以文本来判断有太多不确定因素，如值多了/少个空格if(vals || vals.length > 0) {for(var i=0;i<items.length;i++) {items[i].checked = false;for(var j=0;j<vals.length;j++) {if(parseInt(items[i].value) === parseInt(vals[j])) {items[i].checked = true;}}}} else {for(var i=0;i<items.length;i++) {items[i].checked = false;for(var j=0;j<titles.length;j++) {if(items[i].title === titles[j]) {items[i].checked = true;}}}}}Select.prototype._bind = function(dialog) {var self = this,config = this.config;dialog.on("change", function(e) {var checked = dialog.find("input:checked");var values = checked.map(function() {return $(this).val();});var titles = checked.map(function() {return $(this).data("title");});var showTitles = checked.map(function() {return $(this).data("showtitle");});self.updateInputValue(values, titles, showTitles);if(config.autoClose && !config.multi) self.close();}).trigger('change').on("click", ".close-select", function() {self.close();});}//更新数据Select.prototype.update = function(config) {this.config = $.extend({}, this.config, config);this.initConfig();if(this._open) {this._bind($.updatePicker(this.getHTML()));}}Select.prototype.open = function(values, titles) {if(this._open) return;// open picker 会默认关掉其他的，但是 onClose 不会被调用，所以这里先关掉其他selectfor (var i = 0; i < selects.length; i++ ) {var s = selects[i];if (s === this) continue;if (s._open) {if(!s.close()) return false; // 其他的select由于某些条件限制关闭失败。}}this.parseInitValue();var config = this.config;var dialog = this.dialog = $.openPicker(this.getHTML());this._bind(dialog);this._open = true;if(config.onOpen) config.onOpen(this);}Select.prototype.close = function(callback, force) {if (!this._open) return false;var self = this,beforeClose = this.config.beforeClose;if(typeof callback === typeof true) {force === callback;}if(!force) {if(beforeClose && typeof beforeClose === 'function' && beforeClose.call(this, this.data.values, this.data.titles) === false) {return false}if(this.config.multi) {if(this.config.min !== undefined && this.data.length < this.config.min) {$.toast("请至少选择"+this.config.min+"个", "text");return false}if(this.config.max !== undefined && this.data.length > this.config.max) {$.toast("最多只能选择"+this.config.max+"个", "text");return false}}}$.closePicker(function() {self.onClose();callback && callback();});return true}Select.prototype.onClose = function() {this._open = false;if(this.config.onClose) this.config.onClose(this);}Select.prototype.getHTML = function(callback) {var config = this.config;return this.tpl({items: config.items,title: config.title,showtitle: config.showTitle,closeText: config.closeText})}$.fn.select = function(params, args) {return this.each(function() {var $this = $(this);if(!$this.data("weui-select")) $this.data("weui-select", new Select(this, params));var select = $this.data("weui-select");if(typeof params === typeof "a") select[params].call(select, args);return select;});}defaults = $.fn.select.prototype.defaults = {items: [],input: undefined, //输入框的初始值title: "请选择",multi: false,closeText: "确定",autoClose: true, //是否选择完成后自动关闭，只有单选模式下才有效onChange: undefined, //functionbeforeClose: undefined, // function 关闭之前，如果返回false则阻止关闭onClose: undefined, //functiononOpen: undefined, //functionsplit: ",",  //多选模式下的分隔符min: undefined, //多选模式下可用，最少选择数max: undefined, //单选模式下可用，最多选择数toolbarTemplate: '<div class="toolbar">\<div class="toolbar-inner">\<a href="javascript:;" class="picker-button close-select">{{closeText}}</a>\<h1 class="title">{{title}}</h1>\</div>\</div>',radioTemplate:'<div class="weui-cells weui-cells_radio">\{{#items}}\<label class="weui-cell weui-check_label" for="weui-select-id-{{this.title}}">\<div class="weui-cell__bd weui-cell_primary">\<p>{{this.title}}</p>\</div>\<div class="weui-cell__ft">\<input type="radio" class="weui-check" name="weui-select" id="weui-select-id-{{this.title}}" value="{{this.value}}" {{#if this.checked}}checked="checked"{{/if}} data-showtitle="{{this.showTitle}}" data-title="{{this.title}}">\<span class="weui-icon-checked"></span>\</div>\</label>\{{/items}}\</div>',checkboxTemplate:'<div class="weui-cells weui-cells_checkbox">\{{#items}}\<label class="weui-cell weui-check_label" for="weui-select-id-{{this.title}}">\<div class="weui-cell__bd weui-cell_primary">\<p>{{this.title}}</p>\</div>\<div class="weui-cell__ft">\<input type="checkbox" class="weui-check" name="weui-select" id="weui-select-id-{{this.title}}" value="{{this.value}}" {{#if this.checked}}checked="checked"{{/if}} data-showtitle="{{this.showTitle}}" data-title="{{this.title}}" >\<span class="weui-icon-checked"></span>\</div>\</label>\{{/items}}\</div>',}}($);

转载于:https://www.cnblogs.com/diantao/p/10299936.html

jQuery weui Select组件显示指定值相关推荐

jquery获取指定属性为指定值的对象
/* 1.属性选择器(IE6不支持)对带有指定属性的HTML元素设置样式*/[title]{color: red;}/* 2.属性和值选择器*/[title=te]{color: blue;} *** ...
WeUI用Toast组件显示Loading
在JQuery WEUI的官网(http://jqweui.com/components#toast)没有看到有显示Loading的用法,只有其他的用法,这里都给大家贴出来. 官网已有的用法 $.to ...
jquery简单原则器（匹配索引为指定值的元素）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
微信WeUI扩展组件
主要包括下拉刷新pullToRefresh downRefresh.html 主要的代码是$(document.body).pullToRefresh(); <div class=" ...
jQuery操作Select
jQuery是如何控制和操作select的.先看下面的html代码 <select id="test"><option value="1"&g ...
jQuery获得select的值及其他操作
总结一下 jQuery获得select的值,以及其他操作, 1.获取第一个option的值 $('#test option:first').val();2.最后一个option的值 $('#test ...
如何用jQuery获得select的值
如何用jQuery获得select的值,在网上找了看了一下,下面将总结一下: 1.获取第一个option的值 $('#test option:first').val(); 2.最后一个o ...
jQuery WeUI学习笔记1
前言:内容基本是参考博客笔记,偶尔会加些个人补充,仅作为复习巩固用途.如有错误,请指出,谢谢. 提示:后续更深理解在补充前序.使用过程出现的问题注意:发现问题解决问题比学习新知识更重要一.jQu ...
mysql 增加字段位置靠前_mysql 字段指定值靠前排序方法，多字段排序排序方法
背景:SEO下选择某查询条件查询展示信息为装修设计师以及设计师作品.设计师原型设计为:选择某风格例如:简约,则列表出现拥有简约风格的设计师信息以及该设计师类型为简约的作品(3条靠前记录) 浏览原型 ...

jQuery weui Select组件显示指定值

jQuery weui Select组件显示指定值相关推荐

最新文章

热门文章