已选择jquery上的更新选项
Update options on jquery chosen
我尝试了几种方法来实现这一点,我不知道这是否可能。我有选择的插件(http://harvesthq.github.io/chosen/)。我想做的是:
- 检查每个选项的长度
- 如果选项大于特定大小*剪切并添加"…"*添加带有完整字符串的工具提示
工具提示工作得很好,我不想用新的(…)字符串重新绘制所选的。选定的将保留完整字符串。
这是我的代码
$("select").chosen().each(function () {
$(this).on("liszt:showing_dropdown", function () {
if($(this).parent().is('.myContentClass')){
$(this).next().find('li').each(function(){
var size = measureText($(this).text(), 12, 'Tahoma')
var limit = MyWidth - 50;
if( size.width > limit){
var tmp_str = $(this).text();
var dot_limit = MyWidth.width() - 60;
while(measureText(tmp_str, 12, 'Tahoma').width > dot_limit){
tmp_str = tmp_str.substring(0, tmp_str.length - 1);
}
tmp_str = tmp_str + '...';
//console.log(tmp_str) here im getting the correct string
$(this).attr('title', $(this).text());
$(this).text(tmp_str); // :(
//$("select").chosen().trigger("liszt:updated"); //not working
$('#tiptip_content').css('font-size', '13px');
$(this).tipTip({
maxWidth: "auto",
defaultPosition: "left",
fadeIn: 100,
fadeIn: 100,
attribute: "title"
});
}
$(this).trigger("change"); //not working
});
}
});
});
找出持有该选项的div
/span
,并将这些规则添加到其选择器:
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
相关文章:
- 从选项页面更新chrome扩展清单权限
- 如何从Angular.JS中的子页面更新选项卡视图
- 更新选项卡开关/更改上的chrome扩展图标
- 在 ExtJS 中更新选项卡开关上的网格面板
- 在猫头鹰轮播 2 中初始化后更新选项
- 挖空.js从 AJAX 调用获取数据后更新选项文本
- jQuery 选择,以更新<选项>字段
- 所选选择框中更新选项的性能
- KnockoutJS:无法更新选项值
- 基于单选按钮选择的jQuery DatePicker更新选项
- 如何在ExtJs 5.0中通过ajax调用在更新选项卡后强制重新索引
- 选择2:选择新标记后更新选项
- 已选择jquery上的更新选项
- 占位符不会更新选项值
- 当最小化页面上出现新内容时,如何更新选项卡的标题?
- jQuery选择(chzn)更新选项
- 如何更新选项卡上的通知徽标
- 在Jquery插件wpaginate中使用ajax更新选项总页面
- 避免在更新选项调用中清理画布
- 引导输入提前更新选项