ゴミ溜め@技術系日常系雑文

主にWeb技術やそのほかつまづいたこととか引っかかって調べたこととかをまとめてます。

はてなダイアリーから引っ越しました。)

プルダウンメニューをボタンにして列挙するグリモンスクリプト書いた。

プルダウンメニューをボタンにして列挙するグリモンスクリプト書いた。

書いた。
nameやinclude先はご自由に変更してください。

// ==UserScript==
// @name          addButton_assignedMember2tyamakawa_cybozulive
// @namespace     AyeBee_TY
// @include       *
// ==/UserScript==

(function (d, func) {
    var h = d.getElementsByTagName('head')[0];
    var s1 = d.createElement("script");
    s1.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js");
    s1.addEventListener('load', function() {
        var s2 = d.createElement("script");
        s2.textContent = "jQuery.noConflict();(" + func.toString() + ")(jQuery);";
        h.appendChild(s2);
    }, false);
    h.appendChild(s1);
})(document, function($) { setTimeout( function(){
// --------------------------------------------------------------------------------------------
// main function.

    var addButtons = function(tgtId, dval) {
        var btns = $("<span></span>");

        $('#'+tgtId).children().each( function () {

            var ocevt = '$(\'#'+tgtId+'\').children(\'option[value=\"'+$(this).attr("value")+'\"]\').attr("selected", "selected"); return false;';
            var btn = $("<input></input>");
            $(btn).attr({
                type    : "button",
                value   : $(this).html().replace(/[ \t]*/g,''),
                onclick : ocevt
            });
            if( !(dval && $(btn).attr("value") == dval) ) $(btn).appendTo($(btns));
        });

        $('#'+tgtId).after($(btns));
    }
    
    // 適応したい要素についての処理を書く ここから===============================

    // 例.サイボウズLiveのカテゴリプルダウンをボタン化
    addButtons('cba_gwTaskFolderId');

    // 例.サイボウズLiveの担当者プルダウンをボタン化
    // ただし未選択状態はボタン化しない
    addButtons('cba_gwTaskAssignedMemberId','---');

    // 適応したい要素についての処理を書く ここまで===============================

// mainfunction end.
// --------------------------------------------------------------------------------------------
}, 0)});

使い方は単純。
ご希望のページで新規にGreasemonkeyスクリプトを作成し、このコードを貼り付ける。
で、例に沿って、

addButtons('対象のSelect要素のID')

とか、

addButtons('対象のSelect要素のID', 'ボタン化しない要素の内容')

とか書く。
'ボタン化しない要素の内容'は、例えば<option value="foo">bar</option>であれば、「bar」のこと。
通常であればvalueの「foo」にするのがいいんだろうけど、パッと見で含めたくない要素わかったほうがわかりやすいかなと思って。

保存時は文字コードをページと同じものにするのをお忘れなく。

以上。