bootstrap select option display value instead of t

Question

this might have been answered already, but I don't think this particular question has been answered.

I have a dropbox (select & option) and I want to display the value on screen when the dropbox isn't selected and display the text when it is selected

Example:

<select id="inputmsgType" class="form-control width-90">
<option value=0>description0</option>
<option value=1>description1</option>
<option value=2>description2</option>
</select>

So I want to display the descriptions when I want to select an option. But I want to display the value of the selected option in the dropbox field itself (when I'm not selecting something)

is this possible?

Thanks in advance

Answer 1

Something like this ?

Bootply : http://www.bootply.com/128894

JS :

$('#inputmsgType').on('change mouseleave', function(){
  $('#inputmsgType option').each(function(){
    $(this).html( $(this).attr('desc') ); 
  });
  $('#inputmsgType option:selected').html(  $('#inputmsgType option:selected').attr('value')   );

});

$('#inputmsgType').on('mouseover', function(){
  $('#inputmsgType option').each(function(){
    $(this).html( $(this).attr('desc') ); 
  });
});

HTML :

<select id="inputmsgType" class="form-control width-90">
<option value="0" desc="description0">description0</option>
<option value="1" desc="description1">description1</option>
<option value="2" desc="description2">description2</option>
</select>

Answer 2

With Jquery code, try this one:

$('#inputmsgType').click(function() {
            $('#description').html("Option value is:" + $('#inputmsgType').val() +
                    "<br>Option Description is: " + $('#inputmsgType option:selected').text());
        });