Mostra l'opzione selezionata nel menu di riepilogo a discesa bootstrap

Question

Ho un elenco a discesa nel mio menu di bootstrap.

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

che sto cercando di ottenere l'opzione selezionata nel menu a discesa, come titolo di discesa invece di "opzione di scegliere", come è ora. Ho provato diverse soluzioni trovate su questo e su altri siti, ma non riesco a far funzionare nessuno di loro.

Qualcuno può aiutare con questo?

Answer 1

Questo dovrebbe funzionare per voi:

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

e lo script:

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

È necessario avvolgere il testo "Scegli opzione" all'interno di <span> per modificarne il valore alla selezione.

Ecco il codice di lavoro: http://liveweave.com/U4BpiH

Answer 2

È possibile seguire questo semplice esempio a cui è già stata data una risposta.

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

Aggiungere lo script di seguito:

$(function(){ 

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

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

    }); 

}); 

Inoltre si può provare questo campione in http://jsbin.com/owuyix/4/edit

Answer 3

Modifica il codice HTML come:

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

e JavaScript lato fare come in questo modo:

<script> 

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

Answer 4

Ho avuto lo stesso problema e qui è la soluzione che ho trovato.

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