Jquery - horizontal scroll bar in select box

Trying to add horizontal scroll bar in select box. Its very simple. Here follow the code and see the example.

<div id='Courselists' style="overflow-x:scroll; width:200px; overflow: -moz-scrollbars-horizontal;">
<select id='Courses' name="mySelect" size="15">
    <option value="5">Ajax</option>
    <option value="9">Animal</option>
    <option value="6">HETC course1</option>
    <option value="10">HTML</option>
    <option value="3">Java</option>
    <option value="4">mysql</option>
    <option value="11">Photoshop</option>
    <option value="2">PHP</option>
    <option value="8">Science</option>
    <option value="7">Test course: XS</option>
    <option value="12">Test test Test test Test test Test test Test test </option>
</select>
<div id="Scrolldiv" style='font-size: 1px'>&nbsp</div>
</div>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
    $('#Scrolldiv').css('width', $('#Courses').outerWidth());
    $('#Courses').css('width', $('#Courselists').outerWidth());
    $( "#Courselists" ).scroll(function() {
        $('#Courses').css('width', $(this).outerWidth() + $(this).scrollLeft());
    });
</script>

OUTPUT:
                 

Special thanks to Cyrus . 

jQuery add class to current li and remove prev li when click inside li a

here is html:

<ul>    
    <li class="current"><a href="#">menu item</a></li>  
    <li><a href="#aba">menu item</a></li>
    <li><a href="#abb">menu item</a></li>
    <li><a href="#abc">menu item</a></li>
    <li><a href="#abd">menu item</a></li>
</ul>

If i will press 'a' link it will addClass 'current' to clicked li and remove old li class

Use .parent('li') or .closest('li') to select the clicked <li>.

$('ul li a').click(function() {
    $('ul li.current').removeClass('current');
    $(this).closest('li').addClass('current');
});

Try this: Works fine for me..