jquery選択されたボックスのテキスト以外に選択されたものを表示

Question

私は、選択ボックスのオプションにインデントを提供する文字列スペースの開始で選択オプションの階層セットを持っています。セレクタで選択したときに選択したオプションをスペースで表示したいのですが、選択したものを選択した後、選択したオプションでスペースが消えてしまい、再度選択すると再び表示されます。次のように私はこの最初の半分を達成することができます：ここでは

$('#mySelect').change(function() { 
$("option:selected", this).text($("option:selected",this).text().trim()); 
}); 

は、私はよく分からないが、元に戻ってそれを設定するに取り掛かるする方法です

<select id="mySelect"> 
<option>root</option> 
<option>&nbsp;&nbsp;nested_one</option> 
<option>&nbsp;&nbsp;nested_two</option> 
<option>another root</option> 
<option>&nbsp;&nbsp;nested_other</option> 
</select> 

のように単純化されたHTMLが見えるものです先頭のスペースの量。私は変数（オプションval/idと一緒に）にこの数量のスペースを隠しておくことができます。変更すると、それを見つけて置き換えます。しかし、これは非常に理想的ではありません。私がインデントされた値を開いてクリックする前に選択オプションを選択します。 .clickは、キーボードを介してナビゲートしない限り、まったくトリガーしないで、開いたり閉じたりしても動作するように見えます。選択肢が表示されてオプションを表示するときに、信頼できるイベントがありますか？

多分、私はこの間違った、賢いアイデアについて行っていますか？

Answer 1

これはUbuntuのfirefoxとchromeでうまくいくようですが、私は懐疑的だから、すべてのブラウザでうまくいくと懐疑的ですが、重複する入力は常に正しいしかし良い：

HTML

<select id="mySelect" style="position: absolute; width: 300px;"> 
<option>root</option> 
<option>&nbsp;&nbsp;nested_one</option> 
<option>&nbsp;&nbsp;nested_two</option> 
<option>another root</option> 
<option>&nbsp;&nbsp;nested_other</option> 
</select> 

<select id="mySelectOverlay" style="position: absolute; width: 300px; z-index: 100; pointer-events: none;"> 
    <option>root</option> 
</select> 

jQueryの

$('#mySelect').change(function() { 
var trimmed = $("option:selected", this).text().trim(); 
$("option:selected", $('#mySelectOverlay')).text(trimmed); 
}); 

これは、および/または最善の解決策ではない特定のブラウザで壊れるかもしれないが、何に見えますジョブ。