Il menu a discesa Bootstrap ottiene il valore della voce selezionata

Question

Con i pulsanti di attivazione/disattivazione del menu a discesa Bootstrap esiste un modo per mostrare il valore appena selezionato?

<form action="/output/" name="InputCacheCheck" method="post"> 
{% csrf_token %} 
    <div class="input-prepend input-append"> 
     <div class="btn-group"> 

      <button class="btn dropdown-toggle" name="recordinput" data-toggle="dropdown"> 
      Record 
      <span class="caret"></span> 
      </button> 
      <ul class="dropdown-menu"> 
        <li><a href="#">A</a></li> 
        <li><a href="#">CNAME</a></li> 
        <li><a href="#">MX</a></li> 
        <li><a href="#">PTR</a></li> 
      </ul> 
     <input class=".input-large" name="hostnameinput" id="appendedInputButton" type="text"> 
     <button class="btn" type="submit">Lookup</button> 
     </div> 
    </div> 
</form> 

Anche il nome recordinput non viene erogata nei dati form POST. Qualche idea?

Answer 1

Si dovrebbe essere in grado di modificare il testo a tendina come questo ..

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

Demo http://www.bootply.com/64302

Come si forma essendo 'POST'ed?

Answer 2

Oppure si può fare piace questo ...

Utilizzando (documemt) .on sembra funzionare in modo più coerente che prendere di mira l'evento click dalla classe elemento. Inoltre, assegnando all'elemento button un ID è utile assegnare la selezione a discesa in questo caso.

$(document).on('click', '.dropdown-menu li a', function() { 
      var selText = $(this).text(); 
      $('#dLabel').html(selText + '<span class="caret"</span>'); 
     }); 



    <div class="dropdown"> 
     <button type="button" class="btn btn-primary dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#"> 
      Lists 
      <span class="caret"></span> 
     </button> 
     <ul id="drpdn_List" runat="server" class="dropdown-menu" role="menu" aria-labelledby="dropdownmenu"> 
     </ul> 
    </div> 

Answer 3

In questo caso non utilizzare il menu a discesa Bootstrap. Questo è utile per mostrare uno o più collegamenti ipertestuali quando l'utente fa clic/passa su un pulsante.

se si desidera il menu a discesa di stile, è possibile utilizzare alcuni altri plug-in come selectfx che agisce/restituisce valore come un menu a discesa.