Önyükleme menüsü açılır menüsünde seçili seçeneği göster

Question

Önyükleme menü listemde açılır liste var.

<li class="dropdown"> 
<a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#">Chose option<span class="caret"></span></a> 
    <ul class="dropdown-menu"> 
    <li><a href="#">Option 1</a></li> 
    <li><a href="#">Option 2</a></li> 
    <li><a href="#">Option 3</a></li> 
    <li><a href="#">Option 4</a></li> 
    </ul> 
</li> 

Ben şimdi olduğu gibi yerine "seçeneğini seçti" nin açılan başlığı olarak açılan menüsünden bir seçenek almaya çalışıyorum. Bu ve diğer sitelerde bulunan birkaç çözümü denedim, ancak bunların hiçbirini işe yaratamazdım.

Birisi bu konuda yardımcı olabilir mi?

Answer 1

numuneyi deneyebilirsiniz

$('.dropdown-menu a').click(function(){ 
    $('#selected').text($(this).text()); 
    }); 

Seçimde değerini değiştirmek için <span> içinde 'Seç seçeneğini' yazmanız gerekiyor. İşte

çalışma kodudur: http://liveweave.com/U4BpiH

Answer 2

Zaten yanıtlanan bu basit örneği inceleyebilirsiniz.

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

aşağıdaki komut dosyasını ekleyin:

<div class="dropdown"> 
    <a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#"> 
     <span id="selected">Chose option</span><span class="caret"></span></a> 
    <ul class="dropdown-menu"> 
    <li><a href="#">Option 1</a></li> 
    <li><a href="#">Option 2</a></li> 
    <li><a href="#">Option 3</a></li> 
    <li><a href="#">Option 4</a></li> 
    </ul> 
</div> 

Ve senaryoyu:

$(function(){ 

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

     $(".btn:first-child").text($(this).text()); 
     $(".btn:first-child").val($(this).text()); 

    }); 

}); 

Ayrıca bu bu sizin için çalışması gerektiğini http://jsbin.com/owuyix/4/edit

Answer 3

değiştir html gibi:

<li class="dropdown"> 
    <button id="options" aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" >Chose option<span class="caret"></span></button> 
     <ul class="dropdown-menu"> 
      <li><a href="#" >Option 1</a></li> 
      <li><a href="#">Option 2</a></li> 
      <li><a href="#" >Option 3</a></li> 
      <li><a href="#" >Option 4</a></li> 
     </ul> 
</li> 

ve bu şekilde sevmiyorum javascript tarafında: Ben de aynı sorun vardı ve burada

<script> 

     $(document).ready(function(){ 
      $(".dropdown-menu li a").click(function(){ 
      $("#options").text($(this).text()); 
      }); 
     }); 
    </script> 

Answer 4

bulduğum çözüm.

<div class="btn-group"> 
    <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" id="options"> <span id="opt">Chose option</span> <span class="caret"></span> 
    </button> 
     <ul class="dropdown-menu"> 
     <li><a class="dropdown-item" id="1" href="#" >Option 1</a></li> 
     <li><a class="dropdown-item" id="2" href="#">Option 2</a></li> 
     <li><a class="dropdown-item" id="3" href="#" >Option 3</a></li> 
     <li><a class="dropdown-item" id="4" href="#" >Option 4</a></li> 
     </ul> 
</div> 

<script type="text/javascript"> 
$(function(){ 
    $("#1").click(function() { 
    $("#opt").text($(this).text()); 
    }); 
    $("#2").click(function() { 
    $("#opt").text($(this).text()); 
    }); 
    $("#3").click(function() { 
    $("#opt").text($(this).text()); 
    }); 
    $("#4").click(function() { 
    $("#opt").text($(this).text()); 
    }); 
}); 
</script> 

ait