You are here

Convert li list to select option list

HTML

<div class="sel-box">
    <span id='select'>Select</span>
    <ul class='toc-odd level-1' id="sel-option">
      <li><a href="1">It's finally here</a></li>
      <li><a href="2">Improvements</a></li>
      <li><a href="3">Handling</a></li>
    </ul>
</div>

jQuery

$(function(){
    $('#select').click(function(){
        $('#sel-option').show();       
    });
    $('#sel-option a').click(function(e){
         $('#select').text($(this).text());
         $('#sel-option').hide();
        $(this).addClass('current');
        e.preventDefault();
    })
})

CSS

.sel-box{
    position:relative;
}
a{
    text-decoration:none;
}
#select{
    display:block;
    width:235px;
    height:20px;
    border:1px solid #999;
    padding:5px;
}
.toc-odd{
   position:absolute;
   top:32px;
   background:#f1f1f1;
   width:250px;
    display:none;
}
.toc-odd li{
    padding:5px 10px;
    border-bottom:1px solid #999;
}

Additional css will be needed.

code type: 
js
Taken from: 
http://jsfiddle.net/Tpf7E/22/