Cell Phone Service Providers

Dropdown list HTML element of US based cell phone service providers.

by Erik Bartlow

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">

    <div class="col-sm-3">
      <h5>Dropdown Provider List</h5>

      <div class="panel panel-default">
        <div class="panel-body">
          <div class="btn-group">
             <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
              <span data-bind="label">Select One</span>&nbsp;<span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
              <li><a href="sms.3rivers.net">3 River Wireless</a></li>
              <li><a href="paging.acswireless.com">ACS Wireless</a></li>
              <li><a href="sms.wirefree.informe.ca">Aliant</a></li>
              <li><a href="message.alltel.com">Alltel</a></li>
              <li><a href="txt.att.net">AT&amp;T</a></li>
              <li><a href="txt.bell.ca">Bell Canada</a></li>
              <li><a href="txt.bellmobility.ca">Bell Mobility</a></li>
              <li><a href="blueskyfrog.com">Blue Sky Frog</a></li>
              <li><a href="sms.bluecell.com">Bluegrass Cellular</a></li>
              <li><a href="myboostmobile.com">Boost Mobile</a></li>
              <li><a href="bplmobile.com">BPL Mobile</a></li>
              <li><a href="cwwsms.com">Carolina West Wireless</a></li>
              <li><a href="mobile.celloneusa.com">Cellular One</a></li>
              <li><a href="csouth1.com">Cellular South</a></li>
              <li><a href="cwemail.com">Centennial Wireless</a></li>
              <li><a href="messaging.centurytel.net">CenturyTel</a></li>
              <li><a href="msg.clearnet.com">Clearnet</a></li>
              <li><a href="comcastpcs.textmsg.com">Comcast</a></li>
              <li><a href="cingularme.com">Consumer Cellular</a></li>
              <li><a...

CSS

.btn-input {
   display: block;
}

.btn-input .btn.form-control {
    text-align: left;
}

.btn-input .btn.form-control span:first-child {
   left: 10px;
   overflow: hidden;
   position: absolute;
   right: 25px;
}

.btn-input .btn.form-control .caret {
   margin-top: -1px;
   position: absolute;
   right: 10px;
   top: 50%;
}

JavaScript

$( document.body ).on( 'click', '.dropdown-menu li', function( event ) {

      var $target = $( event.currentTarget );

      $target.closest( '.btn-group' )
         .find( '[data-bind="label"]' ).text( $target.text() )
            .end()
         .children( '.dropdown-toggle' ).dropdown( 'toggle' );

      return false;

   });