CODEWITHSUNDEEP
jquerytwitter-bootstrapdrop-down-menu
Denarius
Denarius

Reputation: 45

bootstrap select option display value instead of text

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

Upvotes: 1

Views: 2590

Answers (2)

Nadhir Titaouine
Nadhir Titaouine

Reputation: 107

With Jquery code, try this one:

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

Upvotes: 0

BENARD Patrick
BENARD Patrick

Reputation: 30975

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>

Upvotes: 1

Related Questions