質問: Struts 1.3でWebアプリケーションを開発しています。 そこで実現したい処理があります。 以下実現したい処理です。 1. フォーム画面(JSP)でセレクトボックスを使用し、DBからの値を表示させる。 例 ▽ 0001 AAA 0002 BBB ←選択 0003 CCC 2. 選択された際にその値の一部をセレクトボックスに表示し、 表示しない値を別のテキストボックスに表示 例 0002▽ (BBBは表示させない) BBB (←テキストボックス) 上記1の処理は実現できているのですが、 2の処理が実現できていません。 詳しい方がいらっしゃいましたら、 回答よろしくお願いします。
回答: 基本的には、SELECT 要素の change イベントで選択された値を加工すればよいのですが、SELECT 要素内の表示に一工夫必要です。 **案1: SELECT 要素の幅を無理やり縮める。** 適切な幅はフォントやブラウザに依存するので、あらゆる環境で上手く動くようにするのはわりと難しいかと思います。下記スニペットは macOS 上の Chrome で何とかなってますが、他の環境では上手くできてないかもしれません。 ``` document.querySelector('#s1').addEventListener('change', function(event) { const s = event.target; const v = s.value; const input = document.querySelector('#i1'); if (v == '') { input.value = ''; s.classList.remove('shrink') return; } s.classList.add('shrink') input.value = v.split(' ')[1]; input.focus(); input.setSelectionRange(input.value.length, input.value.length); }); ``` ``` select { font-size: 16px; font-family: monospace; } .shrink { -webkit-appearance: none; width: 84px; } ``` ``` 選択してください 〒106-0047 東京都港区南麻布 〒107-0062 東京都港区南青山 〒108-0072 東京都港区白金 ``` **案2: 表示に SELECT 要素を使わない** メニューを出すためには SELECT 要素と表示用要素を上手く重ねる必要があります。 このスニペットではさほど真面目に重ねていません。 ``` document.querySelector('#s2').addEventListener('change', function(event) { const p = document.querySelector('#proxy') const s = event.target; const v = s.value; const input = document.querySelector('#i2'); if (v == '') { p.textContent = '選択してください' input.value = ''; return; } p.textContent = v.split(' ')[0]; input.value = v.split(' ')[1]; input.focus(); input.setSelectionRange(input.value.length, input.value.length); }); ``` ``` #proxy { position: absolute; border: 1px splid black; background: ButtonFace; display: inline-block; font-size: 14px; font-family: sans-serif; width: 8em; } #s2 { font-size: 14px; font-family: sans-serif; opacity: 0.01; width: 8em; } ``` ``` 選択してください 選択してください 〒106-0047 東京都港区南麻布 〒107-0062 東京都港区南青山 〒108-0072 東京都港区白金 ``` **案3: SELECT 要素を使わない** SELECT メニューと同等の機能を持った UI ライブラリを利用すれば、表示のカスタマイズはなんとでもできるかもしれません。