customized select option in jQuery

--------------------------------------------------
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type='text/javascript'><!--
$(document).ready(function() {
enableSelectBoxes();
});

function enableSelectBoxes(){
$('div.selectBox').each(function(){
$(this).children('span.selected').html($(this).children('div.selectOptions').children('span.selectOption:first').html());
$(this).attr('value',$(this).children('div.selectOptions').children('span.selectOption:first').attr('value'));

$(this).children('span.selected,span.selectArrow').click(function(){
if($(this).parent().children('div.selectOptions').css('display') == 'none'){
$(this).parent().children('div.selectOptions').css('display','block');
}
else
{
$(this).parent().children('div.selectOptions').css('display','none');
}
});

$(this).find('span.selectOption').click(function(){
$(this).parent().css('display','none');
$(this).closest('div.selectBox').attr('value',$(this).attr('value'));
$(this).parent().siblings('span.selected').html($(this).html());
});
});
}//-->
</script>


<style>
          select {background: url("../images/drop.png") no-repeat scroll right top #03A5D0;padding: 7px 10px;width: 100%;border: 1px solid #000000;box-shadow: 0 1px 2px #000000;}

.selectBox
{ border: 1px solid #000000;
    box-shadow: 0 1px 2px #000000;
position:relative;
display:inline-block;
cursor:default;
text-align:left;
line-height:30px;
clear:both;
color:#888;
}
span.selected
{
background: none repeat scroll 0 0 #feb228;
    padding: 1px 0;
    /*box-shadow: 0 1px 2px #000000;*/
    overflow: hidden;
    text-indent: 20px;
    width: 350px;
}
span.selectArrow
{
-moz-user-select: none;
    background: none repeat scroll 0 0 #000000;
    border: 1px solid #000;
 
    box-shadow: 1px 1px 4px 1px #656565 inset;
    font-size: 20px;
    text-align: center;
    width: 30px;
}

span.selectArrow,span.selected
{
position:relative;
float:left;
height:30px;
z-index:1;
}

div.selectOptions
{
position:absolute;
top:28px;z-index:1;
left:0;
width:381px;
border:1px solid #ccc;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
overflow:hidden;
background:#f6f6f6;
padding-top:2px;
display:none;
}

span.selectOption
{
display:block;
width:80%;
line-height:20px;
padding:5px 10%;
}

span.selectOption:hover
{
color:#f6f6f6;
background:#4096ee;
}
</style>


<form class="contact_form" action="#" method="post" name="contact_form">

                    <div class='selectBox'>
                        <span class='selected'></span>
                        <span class='selectArrow'>&#9660</span>
                        <div class="selectOptions" >
                            <span class="selectOption" value="Option 1">Option 1</span>
                            <span class="selectOption" value="Option 2">Option 2</span>
                            <span class="selectOption" value="Option 3">Option 3</span>
                        </div>
                    </div>
               
              </form>


--------------------------------------------------