【前端】select标签选择多个option--扩展字段长度，实现换行

前言

  这个功能的修改，是自己在点击系统时出现的思考点，为了进一步熟悉系统，开始了这个功能的修改。

问题描述

一、原先的界面

  1.六个汉字的显示

  2.少于六个汉字的显示

二、原因分析

  汉字的长度，会影响是否换行，这个用到了jquery.select2()方法，这个方法是一个封装好的js文件select2.full.min.js，所以不能直接修改里面的代码。

  我们使用的是select标签，从获取的option里面的数据着手修改就可以。

三、执行的代码

  修改后显示的效果：

  代码如下

 $(cinemas).each(function (idxtmp, cinema) {
     var shortName=cinema.cinemaShortName;
     var nbsp="";   //存放空格的变量
           if(shortName.length<6){   //长度小于6的，增加空格
               var num=6-shortName.length;               
                for(var i=0;i<num;i++){
                      nbsp=nbsp+"&nbsp;&nbsp;";
                 }
                     shortName=shortName+nbsp;
         }
   $("#cinemaSel").append("<option value='" + cinema.cinemaCode + "'>" + shortName + "</option>");
   });
});

小结

  使用了for循环和变量来动态实现这个功能，防止出现了4个字、3个字等多种情况，灵活思考，可以减少代码量。 感谢您的访问！