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>
</ul>
</div>

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 https://github.com/esson/bootstrap-ddselect

example:

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

In Javascript file –

$(‘select#ddCallStatus1’).ddselect({
         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>”;
                   $(‘.ddCallStatus’).html(html);
                   $(‘.ddselect’).ddselect({
                               buttonClass: ‘btn-small btn-danger’
                  });
});

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s