Jak wyświetlić wybrany element w menu rozwijanym przycisku Bootstrap


168

W mojej aplikacji używam komponentu Bootstrap Dropdown w następujący sposób:

<div class="btn-group">
    <button class="btn">Please Select From List</button>
    <button class="btn dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
       <li><a tabindex="-1" href="#">Item I</a></li>
       <li><a tabindex="-1" href="#">Item II</a></li>
       <li><a tabindex="-1" href="#">Item III</a></li>
       <li class="divider"></li>
       <li><a tabindex="-1" href="#">Other</a></li>
    </ul>
</div>

Chciałbym wyświetlić wybrany element jako etykietę btn. Innymi słowy, zastąp „Wybierz z listy” pozycją, która została wybrana („Pozycja I”, „Pozycja II”, „Pozycja III”).

Odpowiedzi:


158

O ile zrozumiałem, twój problem polega na tym, że chcesz zmienić tekst przycisku za pomocą klikającego, połączonego tekstu, jeśli tak, możesz wypróbować ten: 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());

   });

});

Jak na Twój komentarz:

to nie działa dla mnie, gdy mam element listy <li>wypełniony przez wywołanie ajax.

więc musisz delegować zdarzenie do najbliższego statycznego rodzica .on()metodą jQuery:

 $(function(){

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

});

Tutaj zdarzenie jest delegowane do statycznego $(".dropdown-menu")elementu nadrzędnego , chociaż możesz delegować zdarzenie również do niego, $(document)ponieważ jest ono zawsze dostępne.


1
Cześć Jai. Wypróbowałem Twój przykładowy link, ale tam nie działa, poza tym muszę pobrać wybraną wartość, aby później
wysłać

@Behseini Czy możesz wyjaśnić „pobierz również wybraną wartość, aby opublikować ją w bazie danych”, która wartość?
Jai

Zaktualizowałem odpowiedź, jeśli bieżąca wartość klikniętego elementu, którą chcesz opublikować w bazie danych.
Jai

2
Cześć Behseini, to "$ (function () {});" jest równoznaczne z "$ (dokument) .ready (funkcja () {});" więcej informacji można znaleźć tutaj: api.jquery.com/ready
Jai

1
Czy nie wydaje się trochę dziwne, że TO jest rozwiązanie?
Christine,

146

Zaktualizowano dla Bootstrap 3.3.4:

Pozwoli to mieć inny wyświetlany tekst i wartość danych dla każdego elementu. Utrzyma również opiekę przy selekcji.

JS:

$(".dropdown-menu li a").click(function(){
  $(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
  $(this).parents(".dropdown").find('.btn').val($(this).data('value'));
});

HTML:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#" data-value="action">Action</a></li>
    <li><a href="#" data-value="another action">Another action</a></li>
    <li><a href="#" data-value="something else here">Something else here</a></li>
    <li><a href="#" data-value="separated link">Separated link</a></li>
  </ul>
</div>

Przykład JS Fiddle


Działa świetnie i właśnie dodałem je jak poniżej, aby ukryć elementy rozwijane po zaznaczeniu „$ (this) .parents („. Btn-group ”). Find ('. Selection'). Text ($ (this) .text ()). end () .children ('.dropdown-toggle') .dropdown ('toggle'); "
Senthil

4
Aktualizacja dla Bootstrap 3.3.4: rodzice („. Input-group-btn”) muszą zostać zastąpieni rodzicami („.
Dropdown

7
To powinna być akceptowana odpowiedź po dodaniu zmiany sugerowanej przez @cincplug. Ponadto, jeśli chcesz zachować kursor w dół w tekście przycisku, musisz użyć .html zamiast .text i połączyć zakres z $(this).text().
MattD,

@MattD, szkoda, że ​​nie widziałem twojego komentarza, zanim skomentowałem zaakceptowaną odpowiedź - jesteś na miejscu.
Paul,

3
Sugeruję przechowywanie $(this).parents(".dropdown").find('.btn')w zmiennej zamiast dwukrotnego przeszukiwania DOM przez jquery.
Adam

29

Udało mi się nieco poprawić odpowiedź Jai, aby działała w przypadku, gdy masz więcej niż jeden przycisk rozwijany z całkiem dobrą prezentacją, która działa z bootstrapem 3:

Kod dla przycisku

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Option: <span class="selection">Option 1</span><span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
    <li><a href="#">Option 3</a></li>
  </ul>
</div>

JQuery Snippet

$(".dropdown-menu li a").click(function(){

  $(this).parents(".btn-group").find('.selection').text($(this).text());
  $(this).parents(".btn-group").find('.selection').val($(this).text());

});

Dodałem również prawy margines 5px do klasy „selection”.


11

Ta pojedyncza funkcja jQuery zrobi wszystko, czego potrzebujesz.

$( 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(' <span class="caret"></span>');
        });
    });
});

Dzięki ! ta odpowiedź uratuje mnie po zmarnowaniu 10 minut na czytanie wszystkich innych rozwiązań.
Aizuddin Badry

7

Oto moja wersja, która, mam nadzieję, pozwoli zaoszczędzić trochę czasu :)

wprowadź opis obrazu tutaj jQuery CZĘŚĆ:

$(".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");
});

CZĘŚĆ HTML:

<div class="container">
  <div class="btn-group">
    <a class="btn btn-default dropdown-toggle btn-blog " data-toggle="dropdown" href="#" id="dropdownMenu1" style="width:200px;"><span class="selection pull-left">Select an option </span> 
      <span class="pull-right glyphiconglyphicon-chevron-down caret" style="float:right;margin-top:10px;"></span></a>

     <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
       <li><a href="#" class="" data-value=1><p> HER Can you write extra text or <b>HTLM</b></p> <h4> <span class="glyphicon glyphicon-plane"></span>  <span> Your Option 1</span> </h4></a>  </li>
       <li><a href="#" class="" data-value=2><p> HER Can you write extra text or <i>HTLM</i> or some long long long long long long long long long long text </p><h4> <span class="glyphicon glyphicon-briefcase"></span> <span>Your Option 2</span>  </h4></a>
      </li>
      <li class="divider"></li>
   <li><a href="#" class="" data-value=3><p> HER Can you write extra text or <b>HTLM</b> or some </p><h4> <span class="glyphicon glyphicon-heart text-danger"></span> <span>Your Option 3</span>  </h4></a>
      </li>
    </ul>
  </div>
  <input type="text" id="vl" />
</div>  

Jak sprawić, by tekst w menu zmienił się na to, co właśnie wybrał użytkownik? Powiedzmy, że wybrali opcję 1, a następnie ją wyłączyli. W tym momencie tekst opcji pierwszej powinien znajdować się na liście rozwijanej, jak to zrobić?
user1835351

Gdy użytkownik wybierze opcję „var selText = $ (this) .children („ h4 ”). Html ()” zmień tekst.
Oskar

7

Ten działa na więcej niż jednym menu na tej samej stronie. Ponadto dodałem daszek na wybranej pozycji:

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

W trybie ścisłym pojawia się komunikat „Uncaught ReferenceError: $ xx is not defined”
Ivan Topić,

Ivan, czy znalazłeś coś, co działa w trybie ścisłym?
zera i jedynki

Działa to świetnie w przypadku wielu rozwijanych menu bootstrap na tej samej stronie. Dziękuję Ci!
Mitch


4

Dalsza modyfikacja w oparciu o odpowiedź z @Kyle, ponieważ $ .text () zwraca dokładny ciąg, więc znacznik karetki jest drukowany dosłownie, niż jako znacznik, na wypadek, gdyby ktoś chciał zachować kursor nienaruszony na liście rozwijanej.

$(".dropdown-menu li").click(function(){
  $(this).parents(".btn-group").find('.btn').html(
  $(this).text()+" <span class=\"caret\"></span>"
  );
});

3

Poprawiłem skrypt dla wielu menu rozwijanych na stronie

$(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());
   });
});

3

Kolejny prosty sposób (Bootstrap 4) na pracę z wieloma listami rozwijanymi

    $('.dropdown-item').on('click',  function(){
        var btnObj = $(this).parent().siblings('button');
        $(btnObj).text($(this).text());
        $(btnObj).val($(this).text());
    });

1

Wydaje się, że to długi problem. Chcemy tylko zaimplementować tag select w grupie wejściowej. Ale bootstrap tego nie zrobił: https://github.com/twbs/bootstrap/issues/10486

sztuczka polega po prostu na dodaniu klasy „btn-group” do nadrzędnego div

html:

<div class="input-group">
  <div class="input-group-btn btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      Product Name <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">A</a></li>
        <li><a href="#">B</a></li>
    </ul>
  </div>
  <input type="text" class="form-control">
  <span class="input-group-btn">
    <button class="btn btn-primary" type="button">Search</button>
  </span>
</div>

js:

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

0

Po kliknięciu elementu dodaj atrybut danych, taki jak data-selected-item = 'true', i pobierz go ponownie.

Spróbuj więc dodać data-selected-item = 'true' do elementu li , który kliknąłeś

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

Przed dodaniem tego atrybutu wystarczy usunąć istniejący wybrany element danych z listy. Mam nadzieję, że to ci pomoże

Aby uzyskać informacje na temat użycia atrybutów danych w jQuery, zobacz dane jQuery


Cześć Murali, Dzięki za komentarz, próbowałem tego, ale nadal nic nie dostaję, var test = $('ul.dropdown-menu li').data('selected-item').find('a').text(); $("#nbtn").html(test); czy możesz dać mi znać, co robię źle?
Suffii

Zobacz zaktualizowaną odpowiedź. Zmieniłem kod na $ ('ul.dropdown-menu li [data-selected-item] a'). Text (); Spróbuj tego
Murali Murugesan

0

Musiałem umieścić kilka wyświetlanych skryptów JavaScript powyżej w kodzie „document.ready”. W przeciwnym razie nie działały. Prawdopodobnie dla wielu oczywiste, ale nie dla mnie. Więc jeśli testujesz, spójrz na tę opcję.

<script type="text/javascript">
$(document).ready(function(){
//rest of the javascript code here
});
</script>

0

Na przykład:

HTML:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
     <BtnCaption>Select item</BtnCaption>
     <span class="caret"></span>   
  </button>
  <ul class="dropdown-menu">
     <li><a href="#">Option 1</a></li>
     <li><a href="#">Option 2</a></li>
     <li class="disabled"><a href="#">Option 3</a></li>   
  </ul> 
</div>

Używam nowego elementu BtnCaption do zmiany tylko tekstu przycisku.

Wklej do $(document).ready(function () {}następującego tekstu

JavaScript:

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

:not(.disabled) nie zezwalaj na używanie wyłączonych elementów menu

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.