これを機能させるためにいくつかのことを試しましたが、可能かどうかはわかりません。選択したプラグインがあります ( 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
});
}
});
});