javascript - 选择的 jquery 上的更新选项

Question

我尝试了几件事试图使这项工作，我不知道是否可能。我有选择的插件（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
      });
    }

});

});

Answer 1

找出包含该选项的div/span并将这些规则添加到其选择器中：

overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;