I have a Bootstrap Button group that used a split button dropdown. What I want to do is when you select an option from the dropdown, the text, href and icon will change on the button. I can get the text to change just fine, but I'm getting stuck with changing the HREF attribute and the icon.

HTML

```
<div class="btn-group">
     <a href="http://google.com" type="button" class="btn btn-default"><span class="standard">Search</span><span class="mobile"><i class="fa fa-search"></i></span></a>
     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button>
     <ul class="dropdown-menu">
          <li><a href="#" data-value="http://google.com" data-icon="fa fa-search">Search</a></li>
          <li><a href="#" data-value="http://yahoo.com" data-icon="fa fa-music">Song Search</a></li>
          <li><a href="#" data-value="http://bing.com" data-icon="fa fa-search-plus">Advanced Search</a></li>
     </ul>
</div>

```

JAVASCRIPT

```
$(".dropdown-menu li a").click(function(){
     $(this).parents(".btn-group").find('a.btn').html($(this).text());
     $(this).parents(".btn-group").find('a.btn').attr('href') = $(this).data('value');
     $(this).parents(".btn-group").find('a.btn i').removeClass();
     $(this).parents(".btn-group").find('a.btn i').addClass($(this).data('icon'));
});

```

I'm want to use the data-values, because in the long run, this dropdown will be dynamic, the list will depend on which page it appears on.