jquery - jQuery Select スタイルの自動幅

Question

私はこの選択スタイル スクリプトを使用しています: http://www.bulgaria-web-developers.com/projects/javascript/selectbox/

新しいセレクタ div の幅をテキストの長さに合わせる方法はありますか? 現時点では、CSS で定義された幅である必要があります。

ドロップリストも同じ？

cssを調整してみましたが、jqueryでしか実現できないのではないかと思いますが、ファイルを編集して機能させる方法がわかりません。

何か案は？

Answer 1

これがあなたのために働くはずの実装です。 http://jsfiddle.net/mq3g4/4/

$("#country_id").selectbox({
    onOpen: function (inst) {
        //there is no onCreated handler, so I have to use this.
        //but if you want you can just fire this somewhere else
        go();
        //console.log("open", inst);
    },
    onClose: function (inst) {
        //console.log("close", inst);
    },
    onChange: function (val, inst) {
        console.log(val);
    },
    effect: "slide"
});

function go(){
    var widestLI = 0;
    //iterate through each LI and get the widest one
    $(".sbOptions > li").each(function(){
        var tmpWidth = $(this).textWidth();
        if (tmpWidth > widestLI) widestLI = tmpWidth;
        console.log(widestLI);
    });
    //now set both these elements to the widest width, plus 20px because of the padding
    $(".sbOptions, .sbHolder").width(widestLI+20);
}

//from http://stackoverflow.com/questions/1582534/calculating-text-width-with-jquery    
//this here gets the width of the html element.                                      
$.fn.textWidth = function(){
    var html_calc = $('<span>' + $(this).html() + '</span>');
    html_calc.css('font-size',$(this).css('font-size')).hide();
    html_calc.prependTo('body');
    var width = html_calc.width();
    html_calc.remove();
    return width;
}​