JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<section id="leftPageList">
					<div class="scrollable" id="ControlSelectDiv">
						<select size="20" name="lbPages"
						onchange="javascript:setTimeout(&#39;__doPostBack(\&#39;lbPages\&#39;,\&#39;\&#39;)&#39;, 0)"
						id="lbPages">
						<option value="1">Index</option>
						<option value="2">hotel</option>
						<option value="13">&#160;&#160;|-- lounge-bar</option>
						<option value="45">&#160;&#160;|-- terrace</option>
						<option value="12">&#160;&#160;|-- events</option>
						<option value="14">&#160;&#160;|-- what-to-see</option>
						<option value="15">rooms</option>
						<option selected="selected" value="17">restaurant</option>
						<option value="18">&#160;&#160;|-- menu</option>
						<option value="19">&#160;&#160;|-- wine</option>
						<option value="20">&#160;&#160;|-- afternoon-tea</option>
						<option value="21">&#160;&#160;|-- meet-the-chef</option>
						<option value="22">&#160;&#160;|-- catering-and-delivery</option>
						<option value="23">spa</option>
						<option value="24">&#160;&#160;|-- treatments</option>
						<option value="46">&#160;&#160;|-- day-spa-packages</option>
						<option value="25">&#160;&#160;|-- premier-spa-suite</option>
						<option value="26">&#160;&#160;|-- belleza-hair-salon</option>
						<option value="27">&#160;&#160;|-- gift-cards</option>
						<option value="28">&#160;&#160;|-- shop</option>
						<option value="29">fitness</option>
						<option value="30">&#160;&#160;|-- personal-training</option>
						<option value="31">&#160;&#160;|-- fitness-classes</option>
						<option value="32">&#160;&#160;|-- memberships</option>
						<option value="33">weddings</option>
						<option value="47">&#160;&#160;|-- packages</option>
						<option value="34">&#160;&#160;|-- open-days-and-wedding-fairs</option>
						<option value="35">&#160;&#160;|-- for-brides-to-be</option>
						<option value="36">corporate-and-banqueting</option>
						<option value="37">&#160;&#160;|--...

CSS

select {
	display       : inline-block;
	position      : relative;
	width         : 235px;
	height        : 100%;
	font-size     : 14px;
	outline       : none;
	border        : 1px solid #f5f5f5;
	overflow      : auto;
	padding       : 5px 0px 0px 0px;
	color         : #333;
	margin-bottom : 5px;
}

select option:nth-child(even) {
	background-color : #f5f5f5;
}

section {
	display        	: inline-block;
	position       	: relative;
	height         	: 100%;
	vertical-align 	: top;
	top				: 10px;
	margin-left		: 20px;
}

JavaScript

window.onload = function(){
    saveLocation();
};

function saveLocation(){
    var name = 'option=',
		ca = document.cookie.split(';'),
		select1 = document.querySelector('#lbPages'),
        select2 = document.querySelector('#lbControls');
	for(var i=0; i<ca.length; i++){
  		var c = ca[i].trim();
        if (c.indexOf(name) === 0){
  			select1.value = c.substring(name.length,c.length);
            select2.value = c.substring(name.length,c.length);
        }
  	}
    
    select1.addEventListener('change', function(e){
    	var cookieVal = 'option=' + this.value;
		document.cookie = cookieVal ;
	});
    
    select2.addEventListener('change', function(e){
    	var cookieVal = 'option=' + this.value;
		document.cookie = cookieVal ;
	});
}

onload = function(e) {
    sels = document.getElementsByTagName('select');
    for(i=0; i<sels.length; i++) {
        sels[i].addEventListener('change', function(){alert('test!')}, false);
    }
}