セレクトボックスのoptionを書き換えるjQueryプラグイン

こんにちは、こんばんは、新人のMです。アドベントカレンダーを始めたはいいものの12/1が終わるまで時間がないので、簡単なネタで行きたいと思います。

セレクトボックスの内容を動的に書き換えたいことが、よくあるのですが、そんなときに使えるjQuery プラグインを書いてみました。数十行なので読んでいただいたら、わかると思いますが、すこし説明します。

使い方

こんな感じに、hashの配列を渡してあげると、指定したセレクトボックスのoptionを書き換えてくれます。

var a = [
    { text: "a", value: "1"},
    { text: "b", value: "2", "data-b-c": "b"},
    { text: "c", value: "3", selected: true}
];
$("select").simpleOptions(a);

書き換えてくれる属性は、今のところ以下のものになります。

text
value
selected
disabled
data-*

他の属性も書き換えたいときは、適宜コードに追加してくだい。

セレクトボックスのvalueが変わったら、changeイベントを発火するようにしてあります。

コード

2番目のスクリプトタグ内のコードをコピペしてお試しください。

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
(function($) {
    var simpleOptions = function(arr) {
        var $options = this.find("option");
        var selected = this.val();
        var diff = arr.length - $options.length;

        if (diff < 0) $options.slice(diff).remove();
        else if (diff > 0) {
            var fragment = document.createDocumentFragment();
            for (var i = diff; i; --i)
                fragment.appendChild(document.createElement("option"));
            this.append(fragment);
        }
        var some = arr.some(function(v) { return !!v.selected;});
        this.find("option").each(function(i, v) {
            v.value = arr[i].value;
            v.text = arr[i].text;
            v.selected = some ? !!arr[i].selected : ""+arr[i].value === selected;
            v.disabled = !!arr[i].disabled;
            for (var k in v.dataset)
                delete v.dataset[k];
            for (var k in arr[i])
                if (/^data-.+/.test(k))
                    v.setAttribute(k, arr[i][k]);
        });
        if (this.val() !== selected) this.change();
        return this;
    };

    $.fn.simpleOptions = simpleOptions;
})(jQuery);
</script>

<script type="text/javascript">
$(function() {
    $("select").on("change", function() {console.log(this);});
    var a = [
        { text: "a", value: "1"},
        { text: "b", value: "2", "data-b-c": "b"},
        { text: "c", value: "3", selected: true}
    ];
    $("select").simpleOptions(a);
});
</script>
</head>

<body>
    <select style="width: 100px">
        <option data-test="test"></option>
        <option data-test="test"></option>
        <option data-test="test"></option>
        <option data-test="test"></option>
    </select>
</body>
</html>

注意

DOMを使いまわしてるので、option自体に何かイベントを割り当てたときは、正しく動作しないので、ご注意ください。

まとめ

セレクトボックスのoptionを書き換えてくれるjQuery プラグインを作りました。やっつけ感はありますが、大抵の場合はこれで事足りると思います。(アドバイスがあればお願いします)