前言

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

问题描述

一、原先的界面

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个字等多种情况，灵活思考，可以减少代码量。 感谢您的访问！

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

选择select 标签中指定值的option
很简单,但是很常用的一点小代码.算法是最笨的遍历算法. <?php $rate = $this->getRate();?> <?php if($rate>0):?> ...
苹果手机微信浏览器select标签选择完成之后页面不会自动回到原位
说明: html默认select选择框控件在IOS的浏览器中是底部弹出下拉选择. 这样到时页面位置错位,选择结束后对应不少元素的点击事件不响应. 这样看起来问题不大,但是选择完成之后点击确定提交弹出 ...
select标签中option的显示隐藏控制(兼容IE)
问题描述: 在有些功能切换的时候,select标签中的某些option是要被隐藏的.但通过设置option的样式为 display:none根本无法隐藏option标签.(ie浏览器中option不支 ...
php checkbox默认选择问题,PHP_php select,radio和checkbox默认选择的实现方法，这是扩展yibing的select默认选择 - phpStudy...
php select,radio和checkbox默认选择的实现方法这是扩展yibing的select默认选择的实现方法复制代码代码如下: value="1">住宅 v ...
html中select标签默认选择,HTML中的select标签如何设置默认选中的选项
方法有两种. 第一种通过的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果. 1 2 3 4 5 1 option > 2 option > 3 option &g ...
前端页面select标签
前端页面select标签 (1)前端页面的select标签disabled="disabled"时不能向后台传送数据 (2)可以采取措施在提交的时候将disabled的属性去除 v ...
JQuery/JS select标签动态设置选中值、设置禁止选择 button按钮禁止点击 select获取选中值...
//**1.设置选中值:(根据索引确定选中值)**// var osel=document.getElementById("selID"); //得到select的IDvar op ...
有关在html中修改select标签的option selected默认选中属性实现
着急想要解决办法的朋友可以直接看最后的内容:} 一般我们使用select标签时大概都会使用到option标签来填充下拉框中的内容只有几个固定的内容写死在页面还好,可能是这样的: <select ...
关于在angular4.X里使用select默认选择和选中满足条件的option
angular4里使用select一般如下: <select class="form-control" required name="actionType" ...

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

前言

问题描述

一、原先的界面

二、原因分析

三、执行的代码

小结

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

最新文章

热门文章