Önyükleme Düğmesi Açılır Başlığında Seçili Öğeyi Görüntüleme

Benim uygulamada böyle bootstrap Dropdown bileşeni kullanıyorum:

<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>

Seçilen öğeyi btn etiketi olarak görüntülemek istiyorum. Başka bir deyişle, "Lütfen Listeden Seç" i seçilen liste öğesiyle değiştirin ("Öğe I", "Öğe II", "Öğe III").

Sorununuzu anladığım kadarıyla, düğmenin metnini tıklayan bağlantılı metinle değiştirmek istediğinizdir, eğer öyleyse bunu deneyebilirsiniz: 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());

   });

});

Yorumunuza göre:

<li>Ajax çağrısı ile doldurulmuş listeler öğe olduğunda bu benim için çalışmaz .

.on()jQuery yöntemiyle olayı en yakın statik üst öğeye devretmeniz gerekir :

 $(function(){

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

});

Burada olay statik üst öğeye devredilir $(".dropdown-menu"), ancak $(document)her zaman kullanılabilir olduğu için olayı da devredebilirsiniz .

Bootstrap 3.3.4 için güncellendi:

Bu, her öğe için farklı ekran metnine ve veri değerine sahip olmanızı sağlayacaktır. Ayrıca seçim sırasında düzeltme işareti devam edecektir.

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>

JS Fiddle Örneği

Bootstrap 3 ile çalışan oldukça iyi bir sunumla birden fazla düğme açılır listesinin olması durumunda Jai'nin yanıtını biraz geliştirebildim:

Düğme Kodu

<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 Pasajı

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

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

});

Ayrıca "seçim" sınıfına 5px margin-right ekledim.

Bu tek jQuery işlevi ihtiyacınız olan her şeyi yapacaktır.

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

İşte bunun zamanımı kurtarabileceğini umduğum versiyonum :)

jQuery BÖLÜM:

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

HTML PARÇASI:

<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>  

Bu, aynı sayfada birden fazla açılır menüde çalışır. Ayrıca, seçilen öğeye şapka ekledim:

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

openiçinde add sınıf kullanmanız gerekir<div class="btn-group open">

ve liek olarakclass="active"

@Kyle tarafından verilen yanıtlara göre $ .text () tam dizeyi döndürdüğü için daha fazla değiştirildi, böylece düzeltme etiketi bir işaretleme yerine tam olarak yazdırılır, ancak birinin düzeltme işareti bozulmadan saklanması istenirse.

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

Birden fazla açılır menü ile çalışmanın başka bir basit yolu (Bootstrap 4)

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

Sayfadaki birden fazla açılır menü için komut dosyasını düzelttim

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

Uzun bir mesele gibi görünüyor. Tek istediğimiz girdi grubuna bir select etiketi uygulamak. Ancak bootstrap bunu yapmaz: https://github.com/twbs/bootstrap/issues/10486

hile sadece üst div'e "btn-group" sınıfı ekliyor

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>');       
});

Öğeyi tıkladıktan sonra, data-selected-item = 'true' gibi bir veri özelliği ekleyin ve tekrar alın.

Tıkladığınız li öğesi için data-selected-item = 'true' eklemeyi deneyin , ardından

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

Bu özelliği eklemeden önce, listedeki mevcut veri seçilen öğeyi kaldırmanız yeterlidir. Umarım bu sana yardımcı olur

JQuery'de veri özniteliği kullanımı hakkında bilgi için jQuery verilerine bakın

Görüntülenen javascripts "document.ready" kodu içine koymak zorunda kaldı. Aksi takdirde çalışmadılar. Muhtemelen birçokları için açık, ama benim için değil. Test ediyorsanız, bu seçeneğe bakın.

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

Örneğin:

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>

Yalnızca düğmenin metnini değiştirmek için yeni öğe BtnCaption kullanıyorum .

$(document).ready(function () {}Aşağıdaki metne yapıştırın

JavaScript:

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

:not(.disabled) devre dışı bırakılmış menü öğelerinin kullanılmasına izin verme