replace selects :/

by mroncetwice

HTML

<!DOCTYPE html>

<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, initial-scale=1.0;">
<title>Checkout | LYSELYSE</title>
 
<link rel="shortcut icon" href="http://lyselyse.com/favicon.ico?force=true" />
<link rel="profile" href="http://gmpg.org/xfn/11" />

<link rel="stylesheet" type="text/css" media="screen" href="http://lyselyse.com/wp-content/themes/lyselyse2012/style.css" />   

<!--link rel="stylesheet" type="text/css" media="screen" href="http://lyselyse.com/wp-content/themes/lyselyse2012/js/jqzoom/css/jquery.jqzoom.css" /-->
  
<link rel="pingback" href="http://lyselyse.com/xmlrpc.php" />
<link rel="alternate" type="application/rss+xml" title="LYSELYSE &raquo; Feed" href="http://lyselyse.com/feed/" />
<link rel="alternate" type="application/rss+xml" title="LYSELYSE &raquo; Comments Feed" href="http://lyselyse.com/comments/feed/" />
<link rel="alternate" type="application/rss+xml" title="LYSELYSE &raquo; Checkout Comments Feed" href="http://lyselyse.com/checkout/feed/" />
<script type='text/javascript' src='http://lyselyse.com/wp-includes/js/comment-reply.min.js?ver=3.5.1'></script>
<script type='text/javascript' src='http://lyselyse.com/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://lyselyse.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://lyselyse.com/wp-includes/wlwmanifest.xml" /> 
<link rel='prev' title='Checkout &rarr; Review Order' href='http://lyselyse.com/review-order/' />
<link rel='next' title='Home' href='http://lyselyse.com/' />
<meta name="generator" content="WordPress 3.5.1" />
<link rel='canonical' href='http://lyselyse.com/checkout/' />


<!-- WooCommerce Version -->
<meta name="generator" content="WooCommerce 1.6.6" />

<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript"...

JavaScript

$('select').each(function(){
	$selectTag = $(this);
	$selectName = $selectTag.prop('name');
	$defaultVals = $selectTag.html();

	$fakeVals = $defaultVals.replace(/<option/g,'<li class="fakeoptions"');
	$fakeVals = $fakeVals.replace(/<\/option/g,'</li');

	$selectTag.hide().after('<div id="selectbox-'+$selectName+'" class="selectbox selectboximage"><ul id="selectlist-'+$selectName+'" class="fakeselectlist none"></ul></div>');
	$fakeList = $('#selectlist-'+$selectName);
	$($fakeVals).appendTo($fakeList);
	$fakeList.children().removeAttr('value').removeAttr('selected');
});

$(document).click(function(e, i){
	$thisEl = $(e.target);
	if ( $thisEl.attr('class') == ('selectbox selectboximage') && $thisEl.children('.fakeselectlist').hasClass('none') ){
		$('.fakeselectlist').addClass('none');
		$thisEl.children('.fakeselectlist').removeClass('none');
	} else if ( $thisEl.children('.fakeselectlist').is('visisble') ){
		//
	} else if ( $thisEl.attr('class') == 'fakeoptions' ){
		$matchTxt = $thisEl.text();
		$matchSelect = $thisEl.closest('div').prevAll('select');
		$matchSelect.find('option:selected').attr('selected',false);
		$matchSelect.find('option:contains('+$matchTxt+')').attr('selected',true).change();
		$thisEl.parent().addClass('none');
	}
});