Geek asks and answers

HTML selection shows value instead of text

Is it possible to html selectdisplay the parameter value instead of text?

It will be used to display a long description in the drop-down list, but when selected it should only show short text / parameter value.

the 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 / combobox / whatever drop-down list, should only display "1"

+3
source share
6 answers

You can do this using the tag tag:

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

I think it can 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 violin Fiddle

+1
source

I found a solution that could 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/

+1
source

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();
+1
source

Just do not specify a value:

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

Will be sent Testwhen selected.

Just put the values ​​entered valueas text.

You cannot show this value in value=exactly the same way.

0
source 
 $('#countryCode').find('option:selected').text();
0
source

More articles:


All Articles