Question

I’m working on a modal multiselect replacement that takes a <select> element and replaces it and it’s <option>s with divs. I am a jQuery novice, and I’ve reached a point now where I have the replacement working perfectly but with a few hiccups in the functionality.

The desired functionality is as follows:

1. You click "Choose Your Options" which creates a modal dialog
   containing a list of div.options which have been populated using
   .text() from each <option>.

2. When you choose an option from the modal, it applies a class of
   .selected to the div.option selects the corresponding <option>
   and appends the .text()of that option to an <li> inside a <ul>
   outside of the modal.

3. When you click on one of the newly generated <li>s, the <li>
   itself should .fadeOut(); and .remove(); while making the
   corresponding <option> unselected.

4. IF you click "Choose Your Options" after this point, you should be able to select/unselect <option>s and have it reflect accordingly in the <ul>.

As of now, everything happens correclty except for step 4.

I’ve included my code here: jsfiddle.net/zumwalt/HB7HJ/.

Once again, I’m very novice at jQuery/js, so I’m positive that I’ve taken some steps in creating this that don’t make sense.

Any help is greatly appreciated!

Answer 1

There were a couple of issues in your js. I updated your fiddle, check it out: http://jsfiddle.net/HB7HJ/13/

The first thing I did was to remove this two lines:

$('ul.multiselect-dropdown-options-'+name+'').empty();
$('div.option', multiselectmodal).removeClass('selected');

They were removing selected items when calling the modal. I believe we don’t want that 😛

Then I checked if your option was selected or not, adding the option if not, and removing it if did:

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

I also took the following js out from where it was (Inside a click() function, didn’t make much sense):

$('.dropdown-option-'+value+'').click(function(){
    $(this).fadeOut(500, function () { $(this).remove(); });
    option.removeAttr('selected');
    $('div.option-'+value+'').removeClass('selected');
});

I’m giving a second look to your code right now, I think it might be improved a bit, i’ll update this if I find something. Anyway, not bad at all for a newbie 😀

Edited after second look 😛

My previous fiddle failed when deleting a row 🙁 I set a new working fiddle up: http://jsfiddle.net/HB7HJ/15/

I refactored the code to make it, imho, a bit more understandable. As Jack the Ripper would say, let’s go by parts:

1. Removed from the js the HTML that could positively be in the HTML (And added it to the HTML :P).
2. Removed some unused stuff, like the scroll thing and some useless variables. Maybe you need that in your application, so be careful. Anyway, since that’s not the point of the answer, it just messes the code up.
3. Added the option value as the id of .options and .dropdown-options. We’ll need them later to check wich option is clicked.
4. Took the click() events (Modal and options stuff) out from the loop, I think it’s clearer that way. That’s why we need the ids on the options.
5. Tweaked the .options and .dropdown-options click() event so it will get the id and add/select/remove/unselect the right option according to that id.

And I think that’s all. I’m sure this code can be vastly improved, but I tried to respect yours so it’d be easier to understand, and I believe it might work as a working base. Let me know if you have further questions 🙂