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 jQuery walkthrough
<!doctype html>
<title>Example &lt;select&gt; replacement</title>
<form action="" method="post">
<label for="param_interest">I want to...</label>
<select name="interest" id="param_interest">
<option value="attend">Attend</option>
<option value="present">Present</option>
<option value="volunteer">Volunteer</option>
// 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');
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.