HTML select shows value instead of text

Question

Is it possible in a html select, to display the value of the option instead of the text?

It's gonna be used for displaying a long disription in the dropdown, but when selecting it should only be showing a short text/ the value of the option.

code:

<select>
    <option value="1">This is a long long text, that explains option 1</option>
    <option value="2">This is a long long text, that explains option 2</option>
</select>

Now the selected item, when you leave the dropdown/combobox/whatever, should only display '1'

Answer 1

You can do it by using the label tag:

<option value="the_value" label="the text displayed">the hidden text</option>

Answer 2

This is the solution.

$("select option").each(function () {
    $(this).attr("data-label", $(this).text());
});
$("select").on("focus", function () {
    $(this).find("option").each(function () {
        $(this).text($(this).attr("data-label"));
    });
}).on("change mouseleave", function () {
    $(this).focus();
    $(this).find("option:selected").text($(this).val());
    $(this).blur();
}).change();