Bootstrap Dropdown nhận giá trị của mặt hàng được chọn

Question

Với các nút chuyển đổi thả xuống Bootstrap có cách nào để hiển thị giá trị vừa được chọn không?

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

Cũng tên bản ghi không được cung cấp trong các biểu mẫu Dữ liệu POST. Bất kỳ ý tưởng nào?

Answer 1

Bạn sẽ có thể thay đổi văn bản thả xuống như thế này ..

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

Làm thế nào là hình thức là 'POST'ed?

Answer 2

Hoặc bạn có thể làm điều đó thích này ...

Sử dụng (documemt) .Trên dường như làm việc liên tục hơn nhắm vào sự kiện nhấp chuột từ lớp phần tử. Ngoài ra, bằng cách cung cấp phần tử nút, ID sẽ giúp chỉ định lựa chọn thả xuống của bạn trong trường hợp này.

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

Trong trường hợp này, bạn không nên sử dụng công tắc thả xuống Bootstrap. Điều này hữu ích khi hiển thị một hoặc nhiều siêu liên kết khi người dùng nhấp/di chuột lên nút.

nếu bạn muốn trình đơn thả xuống kiểu, bạn có thể sử dụng một số plugin khác như selectfx hoạt động/trả về giá trị như trình đơn thả xuống.