

Struts 1.3でWebアプリケーションを開発しています。  
そこで実現したい処理があります。  
以下実現したい処理です。

1． フォーム画面（JSP）でセレクトボックスを使用し、DBからの値を表示させる。

例 ▽  
0001 AAA  
0002 BBB ←選択  
0003 CCC

2． 選択された際にその値の一部をセレクトボックスに表示し、  
表示しない値を別のテキストボックスに表示

例 0002▽ （BBBは表示させない）

BBB （←テキストボックス）

上記1の処理は実現できているのですが、  
2の処理が実現できていません。

詳しい方がいらっしゃいましたら、  
回答よろしくお願いします。


CC BY-SA 3.0
2017-08-08T10:04:25.050
37016
2019-06-20T18:03:55.473
2017-08-08T23:21:10.830
19110
24681
question
javascript java html struts
セレクトボックスの値


基本的には、SELECT 要素の change イベントで選択された値を加工すればよいのですが、SELECT 要素内の表示に一工夫必要です。

**案1: SELECT 要素の幅を無理やり縮める。**

適切な幅はフォントやブラウザに依存するので、あらゆる環境で上手く動くようにするのはわりと難しいかと思います。下記スニペットは macOS 上の Chrome
で何とかなってますが、他の環境では上手くできてないかもしれません。

[code]

    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);
    });
[/code]

[code]

    select {
      font-size: 16px;
      font-family: monospace;
    }
    .shrink {
      -webkit-appearance: none;
      width: 84px;
    }
[/code]

[code]

    <select id="s1">
    <option value="">選択してください</option>
    <option>〒106-0047 東京都港区南麻布</option>
    <option>〒107-0062 東京都港区南青山</option>
    <option>〒108-0072 東京都港区白金</option>
    </select>
    <input id="i1">
[/code]

**案2: 表示に SELECT 要素を使わない**

メニューを出すためには SELECT 要素と表示用要素を上手く重ねる必要があります。

このスニペットではさほど真面目に重ねていません。

[code]

    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);
    });
[/code]

[code]

    #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;
    }
[/code]

[code]

    <div id="proxy">選択してください</div>
    <select id="s2">
    <option value="">選択してください</option>
    <option>〒106-0047 東京都港区南麻布</option>
    <option>〒107-0062 東京都港区南青山</option>
    <option>〒108-0072 東京都港区白金</option>
    </select>
    <input id="i2">
[/code]

**案3: SELECT 要素を使わない**

SELECT メニューと同等の機能を持った UI ライブラリを利用すれば、表示のカスタマイズはなんとでもできるかもしれません。


CC BY-SA 3.0
2017-08-08T14:01:52.597
37024
2017-08-08T14:01:52.597
3475
37016
answer