public
Created

SELECT Replacement

  • Download Gist
index.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
<!doctype html>
<html>
<head>
<title>Select replacement</title>
</head>
<body>
<form action="" method="post">
<fieldset>
<ol>
<li>
<label for="param_involvement">I want to</label>
<select name="interest" id="param_involvement">
<option value="attend">Attend</option>
<option value="present">Present</option>
<option value="volunteer">Volunteer</option>
</select>
</li>
<li>
<button type="submit">Submit Form</button>
</li>
</ol>
</fieldset>
</form>
</body>
</html>
select.replace.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
// select replacement
$('select').each(function() {
// variables
var $this = $(this);
var $form = $this.parents('form').eq(0);
var id = $this.attr('id');
var name = $this.attr('name');
// hide and null the existing select
$this.attr({'id' : '', 'name' : ''}).hide();
// create new ul to replace select
$this.after('<ul class="select"></ul>')
// var for new ul
var $select = $this.next('ul').eq(0);
$select.wrap('<div class="select-container" />')
// set data attribute for the consistent name
$select.data('name', name);
// currently selected (first) option
$select.append('<li class="current">' + $('option', $this).eq(0).val() + '</li>');
// duplicate all options in select to ul
$('option', $this).each(function() {
$select.append('<li>' + $(this).val() + '</li>');
})
// add hidden field to form to capture value from ul
$form.append('<input type="hidden" name="' + name + '" value="' + $('option', $this).eq(0).val() + '" />' );
})
 
$('.select li.current').click(function() {
$(this).parents('ul.select').toggleClass('active');
})
 
$('.select li:not(.current)').click(function() {
var $this = $(this);
var $select = $this.parents('ul').eq(0);
var $hidden = $('input[name=' + $select.data('name') + ']');
var $current = $('.current', $select);
$current.text($this.text());
$select.removeClass('active');
$hidden.val($this.text());
})
 
// global blur state
$('body, html').mouseup(function(){
if($('.select.active').length !=0) $('.select.active').removeClass('active');
});
style.css
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
#signup .select-container {
float: left;
height: 60px;
width: 170px;
margin-right: 10px;
}
 
#signup ul.select {
position: absolute;
margin: 0;
padding: 0;
list-style: none;
background: #131b28 url(../img/ico_arrow_sm.png) no-repeat 95% 23px;
font: 20px 'cubano', sans-serif;
color: #fff;
width: 170px;
}
 
#signup ul.select li {
width: 150px;
padding: 10px;
height: 40px;
line-height: 40px;
}
 
#signup ul.select li:not(.current) {
display: none;
}
 
#signup ul.select.active li {
display: block;
}
 
#signup ul.select li.current {
cursor: pointer;
}
 
#signup ul.select li:hover {
background: #1ea2c9;
}
 
#signup ul.select li.current:hover {
background: #1ea2c9 url(../img/ico_arrow_sm.png) no-repeat 95% 23px;
}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.