Question

我有一个分割按钮下拉列表;最初，按钮的文字是网站＆＃39;点击后它没有做任何事情。我想让它从下拉列表中点击任何选项，该选项的文本和onClick功能在按钮中更新。

例如，我有一个分组按钮，其中包含网站＆＃39;文字和下拉列表包括Google＆＃39; Yahoo＆＃39; Yahoo＆＃39; Bing＆＃39;作为选择。每个选项都可以访问各自的网站。如果谷歌＆＃39;点击，我想替换网站＆＃39;与谷歌＆＃39; （或自定义文字），现在当点击拆分按钮时，它也将转到Google的网站。

<div class="btn-group">
  <button type="button" class="btn btn-sm btn-danger">Websites</button>
  <button onClick="updateDropdown()" type="button" class="btn btn-sm btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="http://www.google.com/">Google</a></li>
    <li><a href="http://www.yahoo.com/">Yahoo</a></li>
    <li><a href="http://www.bing.com/">Bing</a></li>
  </ul>
</div>

JSFiddle Demo

Answer 1

$('.dropdown-menu a').on('click', function(e){
    e.preventDefault();
  var anchor = $(e.currentTarget);
  var href = anchor.attr('href');
  var text = anchor.text();
    var button = anchor.closest('.btn-group').find('button:first-child');
  button.attr('data-url', href);
  button.text(text);
  button.on('click', gotoUrl);
});

function gotoUrl(e){
e.preventDefault();
//use window.open because we can't open these urls in jsfiddle.
window.open($(e.currentTarget).attr('data-url'));

//Maybe this is what you want in your site.
//window.location.href = $(e.currentTarget).attr('data-url')

}

这是一个工作的小提琴。 http://jsfiddle.net/dattaproffs/bjf21pxj/1/

我不知道updateDropdown做了什么，所以我把它留在那里。

使用下拉按钮更新Bootstrap拆分按钮文本和功能

1 个答案: