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 dro

Answer 1

I found a solution that might solve your problem:

HTML:

<select id="countryCode">
   <option data-text="his is a long long text, that explains option 1" value="1">This is a long long text, that explains option 1</option>
   <option data-text="his is a long long text, that explains option 1" value="2">This is a long long text, that explains option 1</option>
</select>

jQuery:

$('#countryCode option:selected').html($('#countryCode option:selected').attr('value')); // already changed onload

$('#countryCode').on('change mouseleave', function(){
    $('#countryCode option').each(function(){
      $(this).html( $(this).attr('data-text') ); 
    });
    $('#countryCode option:selected').html(  $('#countryCode option:selected').attr('value')   );
    $(this).blur();
});
$('#countryCode').on('focus', function(){
    $('#countryCode option').each(function(){
        $(this).html( $(this).attr('data-text') ); 
    });
});

http://jsfiddle.net/9y43gh4x/

Answer 2

I think This may help you

<select id='cboSelect'>
 <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>

Try this jquery

$("#cboSelect").change(function(){    
   $("#cboSelect option:selected").text($("#cboSelect").val());
});

this will change the text of the selected option with its corresponding value

Here is the fiddle Fiddle

Answer 3

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();

Answer 4

Just don't give a value:

<select>
    <option>Test</option>
</select>

Will submit Test when selected.

Just place the values you put in value as the text.

You can't have it show the value in value= just like that.

Answer 5

You can do it by using the label tag:

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