StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Here is what is happening:</p> <pre><code> $('div.select-normal div.option-'+value+'').click(function() { option.prop("selected", "selected"); $('div.select-normal div.option').removeClass('selected'); $(this).toggleClass('selected'); }); </code></pre> <p>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:</p> <pre><code>$('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(); } }); </code></pre> <p>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.</p> <p>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.</p> <p><strong>Update</strong></p> <p>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. </p> <p>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.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload