Skip to content
Create a gist now

Instantly share code, notes, and snippets.

Embed URL


Subversion checkout URL

You can clone with
Download ZIP
SELECT Replacement
<!doctype html>
<title>Select replacement</title>
<form action="" method="post">
<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>
<button type="submit">Submit Form</button>
// 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 = $'ul').eq(0);
$select.wrap('<div class="select-container" />')
// set data attribute for the consistent name
$'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() {
$('.select li:not(.current)').click(function() {
var $this = $(this);
var $select = $this.parents('ul').eq(0);
var $hidden = $('input[name=' + $'name') + ']');
var $current = $('.current', $select);
// global blur state
$('body, html').mouseup(function(){
if($('').length !=0) $('').removeClass('active');
#signup .select-container {
float: left;
height: 60px;
width: 170px;
margin-right: 10px;
#signup {
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 li {
width: 150px;
padding: 10px;
height: 40px;
line-height: 40px;
#signup li:not(.current) {
display: none;
#signup li {
display: block;
#signup li.current {
cursor: pointer;
#signup li:hover {
background: #1ea2c9;
#signup li.current:hover {
background: #1ea2c9 url(../img/ico_arrow_sm.png) no-repeat 95% 23px;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.