朝会発表テーマ

セレクトボックスの選択肢が長いと見切れる

2025年02月07日

経緯

　現在行っているECサイトの案件で、セレクトボックスの選択肢の内容が長い場合、画面から見切れてしまうことがあった。（下記画像参照）

　対応案として改行が挙げられたが、optionタグには効果がなく、その他の対応案として検討、実施したもの（全3案）の備忘録として発表する。

対応案①

　optgroupタグによる、文字サイズの縮小、または自動改行

  <select>
    <optgroup label="EXAMPLE">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </optgroup>
  </select>

　調べるとこの方法が多く出てきたが、効果なし。

　「選択してください」の上にヘッダーのような部分ができているため反映はされている模様。

参考リンク

　　

対応案②

jQuery UIのmultiselect

セレクトボックスをリストに置き換え、セレクトボックスに拡張機能を持たせたようにする。

　この方法では選択肢の内容の自動改行が可能。

　元のセレクトボックスとは連動しているようで、選択値のチェック等は問題ない。

　実態はリストのため、セレクトボックスとは見た目が異なる（cssも別途必要）。下記画像はcssで他のセレクトボックスに見た目を寄せたもの。


　また、PC以外の端末（iPhoneやAndroid等）での動作、見た目も保証できず、保守性も低くなる。

対応案③（この案で対応）

セレクトボックスの幅を超える選択肢を、セレクトボックスの幅に収まる文字数で切り、末尾に…を付けて表示する。

Jsに記述

var multilineSelectmenu = $.widget(“ui.multilineSelectmenu”, $.ui.selectmenu, {
	_setText:function(element, value) {
		if (value) {
			element.html(value);
		} else {
			element.html(“&#160;”);
}
}
});
Function initializeScreen (form, screenItem) {
	let resultsDataSize = getValue(“resultsDataSize”);
	for (let resultsIndex = 0; resultsIndex < resultsDataSize; resultsIndex++) {
		let choiceCombo = $(“#choiceCombo_” + resultsIndex);
		if (!isNullorUndefined(choiceCombo)) {
			choiceCombo.multilineSelectmenu();
		}
	}
}

　スマホの実機では修正前から自動改行されて表示されているため、この対応はスマホ実機では反映されないようにする（ユーザエージェントで判定）。

Jsに記述

function choiceComboOptionResize() {
	let resultsDataSize = getValue(‘resultsDataSize’);
	for (let resultsIndex = 0; resultsIndex < resultsDataSize; resultsIndex++) {
		let choiceCombo = doucument.getElementById(‘choiceCombo_’ + resultsIndex);
		if (isNullorUndefined(choiceCombo)) {
			continue;
		}
		//セレクトボックス自体の幅
		let choiceComboWidth = choiceCombo.offsetWidth;
		//セレクトボックス自体の文字サイズ
		let fontSize = windows.getComputedStyle(choiceCombo).fontSize.replace(‘px’, ‘’);
		//セレクトボックスに入る最大文字数
		let maxLength = Math.floor(choiceComboWidth / fontSize);
		//セレクトボックスの選択肢の内容
		let options = choiceCombo.options;
		for (let optionIndex = 0; optionIndex < options.length; optionIndex++) {
			let option = options[optionIndex];
			//選択肢の内容の文字数
			let str = option.innerText;
			let fontLength = str.length;
			if (fontLength <= maxLength) {
				continue;
			}
			//最大文字数に収まるように整形
			//最後に…を入れるため最大文字数 – 1文字分に切り取り
			str = str.substr(0, maxLength - 1) + ‘…’;
			//選択肢を入れなおす（見た目上のためinnerHTMLに上書き）
			Option.innerHTML = str;
		}
}
}

まとめ

・はじめは対応案①のoptgroupタグの追加で簡単に対応できるかと思ったが効果なし

・対応案②のjQuery UIを使用した方法はcssに力を入れれば見た目はかなり良くなるが、共通化や保守性の面を考えると対応見送りに

・最終的に対応案③の幅を超過した分は…にする対応を実施。しかし、この方法では選択肢の内容全ての表示はできないため、どうしても内容全てを表示したいという要望があれば他の対応をしなければならない

以上

コメント