Selectbox > radio dropdown (bootstrap)

index.html

<form>
  <h3>Save the Bootstrap dropdown value</h3>
  <p>Add a Bootstrap dropdown whose value is saved.  By using faux radio buttons, when the form is submitted, it will know the value chosen.  Unless you're in ie8 - then you'll need the extra jquery (commented out).</p>
  <div class="dropdown">
    <button type="button" 
      class="btn btn-select"
      data-toggle="dropdown">Alpha</button>
    <ul class="dropdown-menu dropdown-menu-select">
    <li><label class="dropdown-radio">
        <input type="radio" value="001" name="alphabet">
        <i>Alpha</i>
        </label>
    </li>
    <li><label class="dropdown-radio">
        <input type="radio" value="002" name="alphabet">
        <i>Bravo</i>
        </label>
    </li>
    <li><label class="dropdown-radio">
        <input type="radio" value="003" name="alphabet">
        <i>Charlie</i>
        </label>
    </li>
    </ul>
  </div>
</form>


<br>
<p>I've moved to <a href="https://codepen.io/btn-ninja" target="_blank">https://codepen.io/btn-ninja/</a>. </p>

script.js

$('.dropdown-radio').find('input').change(function() {
  var dropdown = $(this).closest('.dropdown');
  var radioname = $(this).attr('name');
  var checked = 'input[name=' + radioname + ']:checked';
  
  //update the text
  var checkedtext = $(checked).closest('.dropdown-radio').text();
  dropdown.find('button').text( checkedtext );

  //retrieve the checked value, if needed in page 
  var thisvalue = dropdown.find( checked ).val();
  alert ( thisvalue  );
});

/* 

//If IE8 support is required, add this inside your own IE8 conditional:
//See: http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

    //Prevent ie8 from closing the dropdown before clicking the checkbox
    $('.dropdown-radio').click( function( event ) {
        event.stopImmediatePropagation(); 
    })
    $(document).on('change', '.dropdown-radio input', function(){
        dropdownRadio();  //all the same functions as above
        $('.dropdown-menu').dropdown('toggle'); 
    })
    
    */

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

selectbox-radio-dropdown-bootstrap.markdown

Selectbox > radio dropdown (bootstrap)

A Pen by Lore on CodePen.

License.

style.css

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
outline: 0; }
body { 
  background-color:#f8f8f8; 
  line-height:16px; font-family:sans-serif; }
form { 
  max-width:500px; margin:0 auto; }
.btn { 
  padding:6px; width:100%; border-radius:2px;
  background-color:#fff; color:#333;
  border:1px solid #777;  text-align:left; }
.btn-select { position:relative; }
.btn-select:after {
  content:"";
  display: block; 
  position:absolute; top:50%; right:10px; margin-top:-2px;  
  width: 0;
  height: 0;
  border-top: 4px solid #777;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

.dropdown-menu-select { padding:0; margin-top:-2px; width:100%; border-radius:0 0 2px 2px; border-color:#777;}

.dropdown-radio { 
  display:block; position:relative;
  margin:0;
  width:100%; overflow:hidden; text-overflow:ellipsis;
  border-bottom:1px solid #eaeaea; 
  cursor:pointer;
}
.dropdown-radio input { 
  visibility: hidden; 
  position:absolute; left: -30px; }
.dropdown-radio i { 
  font-weight:normal; font-style:normal; 
  display:block; padding:7px; }

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />