ドロップダウンされていない選択項目の一部のみを選択項目に表示する方法

Question

Webページにドロップダウン選択ボックスがあり、これを選択すると顧客コードなどが選択されます。顧客を表す既存のデータベース。

UIを使いやすくするために、ドロップダウンに表示される情報が、コードだけではなく、顧客のフルネームも同様です。

しかし、スペースの理由から、ドロップダウンされていないときには、選択ボックスに顧客名が表示されないようにしたいと思います。

誰もがこれを行うには比較的簡単な方法を提案できますか？私は現在、プロジェクトでjqueryを使用しています。

要約すると - 選択が閉じられると、顧客のショートコードを表示するだけです。ドロップダウンしたときに、各選択オプションにコードとフルネームの両方を表示したいと思います。

ドロップダウンが開いているかどうかによって、オプションテキストを変更することでこれを行うことができました。しかし、ドロップダウンが開いたり閉じたりしたときにトリガされるイベントは見つからないようです。

Answer 1

これはまったく不可能です。私はたとえば、カスタムdroprownを構築することをお勧めしたい：この場合

<div class="dropdown"> 
    <span class="dropdown-label">1234</span> 
    <select> 
     ... 
    </select> 
</div> 

を、CSSであなたがselectの上にspanを配置し、ユーザーがspanをクリックしたときにpointer-events: noneを使用することができ、selectを（その下にある）がクリックを受け取り、開きます。次に、オプションの選択時にラベルを更新するために、選択した項目のchangeイベントをリッスンするだけです。表示する内容は何でも構いません。

Answer 2

選択したドロップダウンアイテムのテキストを$('.dropdown option:selected').text("text")に設定し、顧客コードと名前を区切る値（恐らく空白）にjavacript string.split()を使用します。