CODEWITHSUNDEEP
jqueryhtmlformstwitter-bootstrap
BeNice
BeNice

Reputation: 2315

How to use Bootstrap dropdown as an HTML form <select>

I think I may be being dense. I wanted to use a Bootstrap dropdown button to select from a list of names. Can I do this in plain HTML and/or very simple jQuery?

IE I want to use a Bootstrap dropdown as an HTML form select input.

<button class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenu1565"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Select Client
    <span class="caret"></span>
</button>
<ul class="dropdown-menu" name="xx-selectClient" aria-labelledby="dropdownMenu1565">
    <li><a id="yy-lloydBrayton">Lloyd Brayton</a></li>
    <li><a id="yy-muiThreet">Mui Threet</a></li>
    <li><a id="yy-wilsonBritton"> Wilson Britton</a></li>

    <li><a id="yy-gilbertMinto">Gilbert Minto</a></li>
    <li><a id="yy-thomasinaLaney">Thomasina Laney</a></li>

I put the form together to look OK (be easy to use etc) and then set about cleaning up to make it functional. The basic BS "Select" is rather ugly so would rather use a dropdown list if I can. Everything else is going OK but I am stuck as to how to use a dropdown as a select.

EDIT: Thanks to Cory and previous SO poster this works for me and I thought might be helpful for someone else

<script>
$(".dropdown-menu a").click(function(){
var selectId = $(this).attr('id')
    $('#formId').submit(function(eventObj) {
        $(this).append("<input type='hidden' name='selectClient' value="+selectId+"/> ");
        return true;
    });
})
</script>

If you want the text not an id then, in the third line use:

var sel = $(this).text()

EDIT: Adarsh's contribution below is off topic but brilliant. I was was trying to pass values but Adarsh's solution adds the name of the selected user to the button providing essential user feedback. So you end up with:

enter image description here

Thanks for a perfect solution people.

Upvotes: 10

Views: 12435

Answers (2)

Adarsh Mohan
Adarsh Mohan

Reputation: 1394

Maybe this is what you wanted..:D

function dropdownMenu1565Set(val){
	if(val.innerHTML!=""){$('#dropdownMenu1565').val(val.innerHTML);$('#dropdownMenu1565').html(val.innerHTML);}
	else{$('#dropdownMenu165').val('');$('#dropdownMenu165').html('Select Client');}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">

<div class="dropdown"><button class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenu1565"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Select Client
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" name="xx-selectClient" aria-labelledby="dropdownMenu1565">
    <li><a id="yy-lloydBrayton" onclick="dropdownMenu1565Set(this);">Lloyd - 1 _ $ Brayton</a></li>
    <li><a id="yy-muiThreet" onclick="dropdownMenu1565Set(this);">Mui Threet</a></li>
    <li><a id="yy-wilsonBritton" onclick="dropdownMenu1565Set(this);">Wilson Britton</a></li>
    <li><a id="yy-gilbertMinto" onclick="dropdownMenu1565Set(this);">Gilbert Minto</a></li>
    <li><a id="yy-thomasinaLaney" onclick="dropdownMenu1565Set(this);">Thomasina Laney</a></li>
  </ul>
</div>

Upvotes: 7

Cory
Cory

Reputation: 1283

You you looking for something like this? http://jsfiddle.net/rszens8z/1/ 

  <div class="dropdown">
   <button class="btn btn-default dropdown-toggle" type="button"      id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria- expanded="true">
     Dropdown
     <span class="caret"></span>
  </button>
   <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a id="yy-lloydBrayton">Lloyd Brayton</a></li>
     <li><a id="yy-muiThreet">Mui Threet</a></li>
     <li><a id="yy-wilsonBritton"> Wilson Britton</a></li>

     <li><a id="yy-gilbertMinto">Gilbert Minto</a></li>
     <li><a id="yy-thomasinaLaney">Thomasina Laney</a></li>
   </ul>
 </div>

You can change the look of it with some built in BS CSS http://getbootstrap.com/components/#btn-dropdowns

Upvotes: 4

Related Questions