jquery插件select之chosen选中去掉空格解决方法

笔者公司开发前端页面，用到chosen插件，使用效果如图：

插件带有搜索功能，用起来非常方便。

由于列表是树形结构，所以在加载数据时，子节点都加了空格，来展现树形结构，那么问题来了，在选中一个子节点后，文本区会带有空格，如图：

这样看上去体验就很差了，但是怎么去掉空格呢，想了很多办法都没奏效，没办法只能读取源码（chosen.jquery.js）了。

打了许多log日志之后，找到了这个方法 Chosen.prototype.single_set_selected_text。没错就是它负责，源码如下：

       Chosen.prototype.single_set_selected_text = function (text) {
            if (text == null) {
                text = this.default_text;
            }
            if (text === this.default_text) {
                this.selected_item.addClass("chosen-default");
            } else {
                this.single_deselect_control_build();
                this.selected_item.removeClass("chosen-default");
            }
            return this.selected_item.find("span").text(text);
        };

我们看到方法传进参数text，text就是我们选中的文本，接下来我们就对这个文本去掉空格即可。在源码里增加一行代码如下：

       Chosen.prototype.single_set_selected_text = function (text) {
            console.log("68");
            if (text == null) {
                text = this.default_text;
            }
            if (text === this.default_text) {
                this.selected_item.addClass("chosen-default");
            } else {
        /*
              注意！！！！！！！！！！！：这是在源码基础上增加的一句话，为了去掉选中后的空格。  
        */
                text=text.trim();

                this.single_deselect_control_build();
                this.selected_item.removeClass("chosen-default");
            }
            return this.selected_item.find("span").text(text);
        };

就此，问题解决。

扩展，我们如果想对选中的option做处理，可以在此方法中加入相应代码。

本文只做抛砖引玉。