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 🙂
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:
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.