Dropdown Semantic-UI: Keep the button value by change event

Question

I was wondering how it's possible to keep the default dropdown button value unchanged after selecting an Item in Semantic-UI? My problem is that when I choose an item the default button keep the value(or the text) of the chosen item.

here is my code:

<div class="ui blue labeled icon top left pointing dropdown button" id="#top_panel_dropdown">
<i class="icon basic user" ></i>
<span class="text" >Hi, Dear John</span>
 <div class="menu" >
    <div class="item">Settings</div>
    <div class="item">Profile</div>
    <div class="item">Logout</div>
 </div>
</div>

and my jQuery:

$('#top_panel_dropdown').on('click', function() {
    $('#top_panel_dropdown').dropdown('toggle');
});

Answer 1

Just drop the span class="text", like so:

<div class="ui blue labeled icon top left pointing dropdown button" id="#top_panel_dropdown">
<i class="icon basic user" ></i>
Hi, Dear John
 <div class="menu" >
    <div class="item">Settings</div>
    <div class="item">Profile</div>
    <div class="item">Logout</div>
 </div>
</div>