Question

Greetings,

I am restyling the select element with HTML5 and jQuery. I can successfully create one dropdown with a .js file dedicated to the element, but I need help on populating the page with multiple instances of this element.

The select element can be summarized as this:

<form>
<select name="fancySelect" class="makeMeFancy">
<option value="0" selected="selected" data-skip="1">Choose Your Location</option>
<option value="1" data-html-text="United States">United States</option>
</select>
</form>

The js is more complex and seeks to hide the select element and replace it.
Briefly:

var select = $('select.makeMeFancy');
var selectBoxContainer = $('<div>',{
    width       : select.outerWidth(),
    className   : 'tzSelect',
    html        : '<div class="selectBox"></div>'
});

var dropDown = $('<ul>',{className:'dropDown'});
var selectBox = selectBoxContainer.find('.selectBox');

It then creates css styles for this element further down the script.

My question is how do I maintain this one javascript document for multiple select elements. Is it possible with one main variable and multiple select classnames i.e.

var select =$('select.makeMeFancy');
var selectBoxContainer = $('<div>',{
width   : select.outerWidth(),
className   : 'tzSelect','tzSelectb','tzSelectc'
html        : '<div class="selectBox"></div>'

HTML example is available at: select restyling example updated: SOLVED

I have 3 elements inline, and as you can see it pulls the code into the very last select element and groups them altogether.

Sorry for the sloppy description, I think this should be everything.

The original dropdown was created by Turtorial Zine over at TutorialZine “Making better select elements”

Answer 1

They actually have converted this to a plugin on their website. See here. No need to reinvent the wheel.

Edit
According to the tutorial:

You can use this plugin by simply
dropping the tzSelect folder
(available from the download button
above) into your project root, and
including jquery.tzSelect.css and
jquery.tzSelect.js in your HTML
documents.

Example Code (From Tutorial)

$(document).ready(function(){

    $('select.makeMeFancy').tzSelect({
        render : function(option){
            return $('<li>',{
                html:   '<img src="'+option.data('icon')+'" /><span>'+
                        option.data('html-text')+'</span>'
            });
        },
        className : 'hasDetails'
    });

    // Calling the default version of the dropdown
    $('select.regularSelect').tzSelect();

});