Jquery HTML5 select dropdown restyling conflict. Need multiple select dropdowns on same page

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"

Solved, the plug in was available on the site.

nutnics
– nutnics

2011-03-22 21:53:15 +00:00
Commented Mar 22, 2011 at 21:53 — nutnics
– nutnics, Commented Mar 22, 2011 at 21:53

Richard Marskell - Drackir · Accepted Answer · 2011-03-22 20:29:49Z

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();

});

edited Mar 22, 2011 at 20:29

answered Mar 22, 2011 at 20:24

Richard Marskell - Drackir

13.4k3 gold badges37 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nutnics Over a year ago

Nice catch, I should've looked for their plug in. I will update my dropdowns with this and respond with the results

typeof · Accepted Answer · 2011-03-22 20:10:48Z

First off, the Tutorial Zine code wasn't coded to support multiple elements. The best solution would be to create a jQuery plugin that supported multiple elements, but that greatly broadens the scope of this answer.

I would suggest wrapping their code (except the .ready()) into a function which takes arguments: the select's selector, and the drop down menu's selector:

function createHTMLSelect(selectSel, menuSel) {
    // declare this instead
    var select = $(selectSel);

    ...

    // also this
    var dropDown = $('<ul>',{className:menuSel});
}

You then call your function for each select you have on the page:

$(document).ready(function(){

// first select
createHTMLSelect('select.makeFancy', 'dropDown');

// second select
createHTMLSelect('select.makeMoreFancy', 'otherDropDown');

... 

});

You will have to have different class names for each select/dropdown menu combination given the way this code was written.

I haven't tested this, so there might be some other tweaks to get it to work.

Collectives™ on Stack Overflow

Jquery HTML5 select dropdown restyling conflict. Need multiple select dropdowns on same page

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related