DoCow
  1. DoCow
  3. Como exibir o item selecionado no título suspenso do botão Bootstrap

Como exibir o item selecionado no título suspenso do botão Bootstrap

Eu estou usando o componente dropdown bootstrap no meu aplicativo como este:

Eu gostaria de exibir o item selecionado como o label btn. Em outras palavras, substitua “Por favor, selecione da lista” com o item da lista que foi selecionado (“Item I”, “Item II”, “Item III”).

Tanto quanto eu entendi seu problema é que você deseja alterar o texto do botão com o texto do link clicando, se assim você pode tentar um presente: http://jsbin.com/owuyix/4/edit 

  $(function(){ $(".dropdown-menu li a").click(function(){ $(".btn:first-child").text($(this).text()); $(".btn:first-child").val($(this).text()); }); });

Como por seu comentário:

isso não funciona para mim quando eu tenho o item de listas

  • preenchido através da chamada ajax.

    Portanto, você precisa delegar o evento para o pai estático mais próximo com o método .on() jQuery: 

      $(function(){ $(".dropdown-menu").on('click', 'li a', function(){ $(".btn:first-child").text($(this).text()); $(".btn:first-child").val($(this).text()); }); });

    Aqui o evento é delegado para o pai estático $(".dropdown-menu") , embora você possa delegar o evento para o $(document) também porque está sempre disponível.

    Atualizado para o Bootstrap 3.3.4:

    Isso permitirá que você tenha um texto de exibição e um valor de dados diferentes para cada elemento. Também persistirá o cursor na seleção.

    JS: 

     $(".dropdown-menu li a").click(function(){ $(this).parents(".dropdown").find('.btn').html($(this).text() + ' '); $(this).parents(".dropdown").find('.btn').val($(this).data('value')); });

    HTML:

    Exemplo do violino de JS

    Consegui melhorar levemente a resposta de Jai para trabalhar no caso de você ter mais de um botão suspenso com uma boa apresentação que funciona com o bootstrap 3:

    Código para o botão

    Snippet de JQuery 

     $(".dropdown-menu li a").click(function(){ $(this).parents(".btn-group").find('.selection').text($(this).text()); $(this).parents(".btn-group").find('.selection').val($(this).text()); });

    Eu também adicionei uma margem de 5px para a class “selection”.

    Este funciona em mais de um menu suspenso na mesma página. Além disso, adicionei o cursor no item selecionado: 

      $(".dropdown-menu").on('click', 'li a', function(){ $(this).parent().parent().siblings(".btn:first-child").html($(this).text()+' '); $(this).parent().parent().siblings(".btn:first-child").val($(this).text()); });

    Aqui está a minha versão deste que eu espero que possa economizar um pouco do seu tempo 🙂

    insira a descrição da imagem aqui jQuery PART: 

     $(".dropdown-menu").on('click', 'li a', function(){ var selText = $(this).children("h4").html(); $(this).parent('li').siblings().removeClass('active'); $('#vl').val($(this).attr('data-value')); $(this).parents('.btn-group').find('.selection').html(selText); $(this).parents('li').addClass("active"); });

    PARTE HTML: 

     
     
     Select an option

    você precisa usar add class open em

    e em li add class="active"

    Modificado com base na resposta do @Kyle como $ .text () retorna a string exata, então a tag de careta é impressa literalmente, do que como uma marcação, para o caso de alguém querer manter o cursor intacto no menu suspenso. 

     $(".dropdown-menu li").click(function(){ $(this).parents(".btn-group").find('.btn').html( $(this).text()+" " ); });

    Esta única function jQuery fará tudo o que você precisa. 

     $( document ).ready(function() { $('.dropdown').each(function (key, dropdown) { var $dropdown = $(dropdown); $dropdown.find('.dropdown-menu a').on('click', function () { $dropdown.find('button').text($(this).text()).append(' '); }); }); });

    Eu corrigi o script para vários menus suspensos na página 

     $(function(){ $(".dropdown-menu li a").click(function(){ var item = $(this); var id = item.parent().parent().attr("aria-labelledby"); $("#"+id+":first-child").text($(this).text()); $("#"+id+":first-child").val($(this).text()); }); });

    Parece ser um assunto longo. Tudo o que queremos é apenas implementar uma tag de seleção no grupo de input. Mas o bootstrap não faria isso: https://github.com/twbs/bootstrap/issues/10486

    o truque é apenas adicionar a class “btn-group” ao div pai

    html:

    js: 

     $(".dropdown-menu li a").click(function(e){ var selText = $(this).text(); $(this).parents('.input-group').find('.dropdown-toggle').html(selText+' '); });

    Depois de clicar no item, adicione um atributo de dados como dados-selecionados-item = ‘true’ e obtenha novamente.

    Tente adicionar data-selected-item = ‘true’ para o elemento li em que você clicou 

      $('ul.dropdown-menu li[data-selected-item] a').text();

    Antes de adicionar este atributo, basta remover o item selecionado com dados existente na lista. Espero que isso possa ajudá-lo

    Para obter informações sobre o uso de atributos de dados no jQuery, consulte os dados do jQuery

    Por exemplo:

    HTML:

    Eu uso o novo elemento BtnCaption para alterar apenas o texto do botão.

    Cole em $ (document) .ready (function () {} o seguinte texto

    JavaScript: 

      $(".dropdown-menu li:not(.disabled) a").click(function () { $(this).closest(".dropdown").find(".btn BtnCaption").text($(this).text())); });

    : não (.disabled) não permitem usar os itens de menu desativados

    Eu tive que colocar alguns dos javascripts exibidos acima do código “document.ready”. Caso contrário, eles não funcionaram. Provavelmente óbvio para muitos, mas não para mim. Então, se você está testando, olhe para essa opção.
    Intereting Posts