選択されたオプションのテキストと表示されたものが異なる

Question

オプションの情報が長いテキスト（属性データ - 表示）を持つ選択入力ボックスを設計する必要がありますが、選択すると、より短いバージョン（属性値）を表示します（これは送信される値になります）。

例えば、

<select> 
    <option data-display="level1" value="1"></option> 
    <option data-display="level2" value="2" selected></option> 
    <option data-display="level3" value="3"></option> 
</select> 

たとえば、入力ボックスが表示されている場合は、テキスト「2」としたいと思います。しかし、それをクリックしてオプションを選択すると、3つの説明が表示されますが、選択したテキスト「2」を「level2」に変更する必要はありません。

私はあなたが私の言いたいことを理解してくれることを願っています。

編集：ここでは は私がしたいと思う行動の画像です：ドロップダウンショー「データ表示」で

オプションのみ

そしてオプションが選択され、私はその番号を見たいだけです。

Answer 1

focusの場合は1、changeの場合は1、イベントリスナーを2つ追加する必要があります。

focusは、「私はあなたたちは私が何を意味するか理解してほしい。」それは、データ表示値だとselectがそれにそれがinnerHTMLだ変えるべきだ値

$(document).ready(function() { 
 
    $('select').focus(function() { 
 
    $('option').each(function() { 
 
     $(this).html($(this).data('display')); 
 
    }); 
 
    }).on('change', function() { 
 
    $('option').each(function() { 
 
     $(this).html($(this).val()); 
 
    }); 
 
    $(this).blur(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select> 
 
    <option data-display="level1" value="1">1</option> 
 
    <option data-display="level2" value="2" selected>2</option> 
 
    <option data-display="level3" value="3">3</option> 
 
</select>

Answer 2

jqueryにはthisのようなカスタムセレクトを使用し、カスタムテンプレートを使用してアイテムやメニューをレンダリングする必要があります。 _renderButtonItem,_renderItem、_renderMenuなどのコールバックを使用して、要素に必要な情報とテンプレートを提供します。 Select2ライブラリのtheming/templating optionsを使用することもできます。