public
Created

Select replacement jQuery walkthrough

  • Download Gist
index.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
<!doctype html>
<html>
<head>
<title>Example &lt;select&gt; replacement</title>
</head>
<body>
<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>
</form>
</body>
</html>
sreplace.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');
});

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.