已选择jquery上的更新选项

Update options on jquery chosen

本文关键字:更新 选项 选择 jquery      更新时间:2023-09-26

我尝试了几种方法来实现这一点,我不知道这是否可能。我有选择的插件(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;