BootStrap twitter: Html Select theme

if you are using bootstrap f/w theme for your website development, you have noticed that you have to do following code in order to make dropdown / Select  –

<div class=”btn-group”>
<button data-toggle=”dropdown” class=”btn btn-small btn-danger dropdown-toggle”>             <i class=”icon-angle-down icon-on-right”></i></button>
<ul class=”dropdown-menu” style=”text-align: left;”>
              <li><a href=”#”>Pending</a></li>
             <li><a href=”#”>Assigned</a></li>
            <li><a href=”#”>Acknowledged</a></li>

Now Instead , how about if we just use our regular <select> with the same theme. If you apply same class as above to your <select> , it won’t work though.

Solution is “bootstrap-ddselect.js”

You can download from


<select id=”ddCallStatus1″ style=”width:120px;”>

In Javascript file –

         buttonClass: ‘btn btn-small btn-danger’

I am, creating <select> at runtime , loading <options> from database values –

$.getJSON(‘Dispatcher/GetCallStatusList’, function (data) {
            var html = “<select style=’width: 120px;text-align: left;’ class=’ddselect’>”;
           $.each(data, function (index, optionData) {
                                     html += “<option value='” + optionData.CodeValue + “‘>” +                                $.trim(optionData.CodeText).toUpperCase() + “</option><br/>”;
                    html += “</select>”;
                               buttonClass: ‘btn-small btn-danger’


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s