Question

I’m working on a select element replacement script for a kiosk project that takes a element and replaces it and it’s <options>s with divs. I have two versions – ‘normal’ and ‘modal’ for both <select> and <select[multiple="multiple"]> elements. Independently of each other, the individual replacements work as they should. When I place all of them on a page, they break functionally. In particular, for both the non-modal <select> and non-modal <select[multiple="multiple"]> aren’t toggling classes when their respective div.options are clicked. I believe there is some kind of conflict with the jQuery that’s causing the problem, but I’m too much of a novice to figure it out.

In my code, you’ll notice alot of variables and instances of adding html, which may seem unnecessary. The purpose of the script is to replace form elements being generated by a form builder which generates a simple tag and cannot be altered.

I’ve included my code here: http://jsfiddle.net/zumwalt/52At7/

Any help is greatly appreciated!

Answer 1

Here is what is happening:

 $('div.select-normal div.option-'+value+'').click(function() { 
     option.prop("selected", "selected");
     $('div.select-normal div.option').removeClass('selected');
     $(this).toggleClass('selected');
 });

When the code above executes for your normal select many, the css class is correctly being applied. However, later on you have this code for the modal select many:

$('div.option').click(function() {
    var value = $(this).attr('id');
    var option = $('option[value=' + value + ']');
    var optiontext = $(this).text();

    option.prop("selected", !option.prop("selected"));
    $(this).toggleClass('selected'); // HERE IS THE ERROR
    if ($(this).hasClass('selected')) {
        $('ul.multiselect-dropdown-options')
            .append('<li id="' + value 
                + '" class="dropdown-option drop-down-option-' 
                + value + '">' + optiontext 
                + '<a class="remove-option">x</a></li>');
    } else {
        $('.drop-down-option-' + value).fadeOut().remove();
    }
});

Since clicking on the normal select many also triggers a $(‘div.option’).click(), it is executing toggleClass and removing the ‘selected’ class that was added before.

BTW, it is very hard to debug your fiddle if you are working on it. When posting a fiddle to SO, please post a fork URL that you will not be editing.

Update

Give a man a fish and he eats for a day… teach a man to fish and he eats for a lifetime. Despite the fact that your fiddle was changing, I debugged this using the Google Chrome Developer tools. Just go to your fiddle, right click, and choose Inspect Element. Click the Scripts tab, and choose the “show/” script from the dropdown. You can then click on the line numbers to set breakpoints in the javascript. Go back to Chrome, do something in the Result pane, and Chrome should hit a breakpoint. You can then step through the actions and see, line by line, how the DOM is affected by your script.

You will need to set breakpoints inside of your each() and click() functions though, as Chrome doesn’t have very good Step Into functionality (it steps into the jquery source). Also, having a 2-monitor display helps a LOT here, so that you can step through the debugger on one monitor while viewing the fiddle DOM result in another monitor.