javascript - Bootstrap Button Group to dynamically Change Text, HREF and Icon - JQuery -

i have bootstrap button group used split button dropdown. want when select option dropdown, text, href , icon change on button. can text change fine, i'm getting stuck changing href attribute , 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 use data-values, because in long run, dropdown dynamic, list depend on page appears on.

ok... apparently correct except href portion.

instead of

$(this).parents(".btn-group").find('a.btn').attr('href') = $(this).data('value'); 

use

$(this).parents(".btn-group").find('a.btn').attr('href', $(this).data('value')); 

i have couple console.logs displaying results of change, , it's working perfectly.