由于服务控件dropdownlist没有鼠标移动上去显示全部内容的属性设置,有时候内容过大不能全部看到完整信息,项目要求显示全部内容,所以编写了一个简单的插件!将下拉选择的option 元素加入titile属性即可,后面内容过长又让截取改成点点的形式 ,唉 那就改吧!
代码:
/* dropdownlist下拉框 1.选中选项 显示全部内容,2.内容过大自动截断! mack.cao 13.3.1 */ (function ($) { $.fn.ddlUI = function (options) { //默认参数 var defaults = { showNum: 55 //显示的内容长度 }; //有其他参数合并对象 var options = $.extend(defaults, options); this.each(function () { $(this).find("option").each(function () { var title = $(this).text(); var showContent = title.length > options.showNum ? title.substr(0, options.showNum) + '...' : title; $(this).text(showContent); //显示的内容 $(this).attr("title", title); //下拉选项中加入title属性 }) }); }; })(jQuery);
页面调用:
<script src="ddlUI.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("select").ddlUI({ showNum: 20 }); //我设置的默认超过20长度就显示点点!! }) </script>
效果图: