Dropdown selected icon to be change

Question

i have implemented social website in that. friends status should be change based on the drop down button selected. i had been added my code following. please suggest suitable answer

<div class="dropdown" id="dLabel">
  <button class="btn-small btn-default " data-hover="dropdown" data-target="#" href="#">

Friends

         <li><a tabindex="-1" href="#">Close Friends</a></li>
         <li><a tabindex="-1" href="#">Notification</a></li>
         <li><a tabindex="-1" href="#">Acquaintances</a></li>
         <li class="divider"></li>
         <li><a tabindex="-1" href="#">Add Another List</a></li>
         <li><a tabindex="-1" href="#">Suggest Friends</a></li>
         <li class="divider"></li>
         <li><a tabindex="-1" href="#">Report/Block</a></li>
         <li><a tabindex="-1" href="#">Unfriend</a></li>

my glyphicon icon to be change. ie my drop down list contain above. normally icon will show glyphicon-ok icon. if i select close friends the icon will be change glyphicon-star. if i select Acquaintances another icon wants to be change. Like facebook friends status. when we change the close friends. the icon to changing yellow star. like wise i wants to be change please suggest me suitable answer

Answer 1

Firstly, I understood your question, but couldnt gethow you want to achieve your requirement. But whatever you are using this will be hwlpful. I would suggest you to use something like this

<select  id="dLabel">
<option value="CloseFriends">Close Friends</option>
<option value="Notification">Notification</option>
//....other options as you used in your code

</select>

Add a listener to that dropdown and code accordingly based on if condition.

$('#dLabel').bind('change', function(e,p) {  // bind event listener on that component
var dat=$(this).val(); //get the value of the selected option

if(val=='CloseFriends'){
    //action
     }
   //similarly your other conditions

        });