ドロップダウンの幅を動的に変化させる方法

GrapeCity社が提供しているInputManJSというライブラリを使用したケースを紹介します。

Inputman.GcComboBox - InputManJS（インプットマンJS）ヘルプ | Developer Tools〈開発支援ツール〉 - メシウス株式会社

快適な入力を実現する日本仕様の入力用JavaScriptコントロール「InputManJS」のサンプルコードを見て触れて学習することができます。

demo.mescius.jp

ドロップダウンリストの幅指定（コンストラクタ）

結論から言うと、これです↓

dropDownWidthというプロパティを指定すると、ドロップダウンリストの幅を自由に設定できます
ちなみに、’auto’ という指定も可能です。自動調整してくれるそうです。

となると、わかりやすい例としては都道府県と市区町村のドロップダウンが並んでいた場合
都道府県に紐づく市区町村を出したいですよね
この市区町村のコンボボックスに設定するドロップダウンリストは動的に変化させるべきです

こういった例では、コンボを生成した段階で幅の指定はできませんよね

動的に幅を設定する方法

このコンボボックスクラスにはドロップダウンリストを開いた瞬間を検知するイベントがあります

ドロップダウンリストが表示された瞬間であれば、ドロップダウンリストそのもののスタイルを
操作することができます！

// combobox.itemsには 'id' と 'text' を設定しています。
combobox.addEventListener(GC.InputMan.GcComboBoxEvent.DropDownOpened, (sender) => {
    let width = (combobox.items.reduce(lengthComp) * 15) + 'px'; // 最大幅を算出
    $(sender.Db.lc).find('.gcim__listbox').css('width', width); // ドロップダウンリストの幅を設定
});

// 最大文字数を取得する関数
function lengthComp(a, b) {
    if (typeof a === 'object') {
        return a.text.length > b.text.length ? a.text.length : b.text.length;
    } else {
        return a > b.text.length ? a : b.text.length;
    }
}

という具合で実装できます！

では！