jQuery-使用替换div选择/取消选择多选选项 [英] jQuery - Select/unselect multiselect options with replacement divs

问题描述

我正在进行模态多选替换，该替换采用一个<select>元素并将其替换为<option>并使用div.我是jQuery的新手，到现在为止，我的替代品可以正常工作，但在功能上有些打..

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.

所需的功能如下:

1. 您单击选择选项" ，这会创建一个模式对话框 包含已使用填充的div.option列表 每个<option>中的.text().

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>.

当您从模式中选择一个选项时，它将应用一类 .selected至div.option选择相应的<option> 并将该选项的.text()附加到<ul>内的<li> 在模态之外.

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.

当您单击一个新生成的<li>时，<li> 本身应该在.fadeOut();和.remove();的同时 相应的<option>未选中.

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

如果，在此之后单击选择选项"，您应该能够选择/取消选择<option>，并将其相应地反映在<ul>中.

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>.

到目前为止，除第4步外，其他所有操作均正确无误.

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

我在这里包括了我的代码: jsfiddle.net/zumwalt/HB7HJ/

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

再一次，我是jQuery/js的新手，所以我很肯定我已经采取了一些步骤来创建没有意义的

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.

任何帮助将不胜感激！

推荐答案

您的js中有几个问题.我更新了您的提琴，请查看: http://jsfiddle.net/HB7HJ/13/

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

他们在调用模式时正在删除选定的项目.我相信我们不想要那个:P

They were removing selected items when calling the modal. I believe we don't want that :P

然后我检查了是否选择了您的选项，如果没有选择则添加该选项，如果选择则将其删除:

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

我还从以下位置取出了以下js(在click()函数内部，没有多大意义):

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');
});

我现在正在对您的代码进行第二次查看，我认为它可能会有所改进，如果我发现有什么问题，我会进行更新.无论如何，对于新手来说一点都不坏:D

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 :D

第二遍后P

删除行时，我之前的小提琴失败了:(我设置了一个新的小提琴: http://jsfiddle .net/HB7HJ/15/

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

我对代码进行了重构，使它更加易于理解.正如开膛手杰克(Jack the Ripper)会说的那样，让我们​​分篇进行:

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

1. 从js中删除了可能肯定在HTML中的HTML(并将其添加到HTML:P).
2. 删除了一些未使用的内容，例如滚动内容和一些无用的变量.也许您的应用程序中需要它，所以要小心.无论如何，由于这不是答案的重点，所以只会使代码混乱.
3. 添加了选项值作为.option s和.dropdown-option s的ID.稍后我们将需要它们来检查是否选中了wich选项.
4. 从循环中删除click()事件(模态和选项之类的东西)，我认为这样更清楚.这就是为什么我们需要选项上的ID.
5. 调整了.option和.dropdown-option s click()事件，以便它将获取ID，并根据该ID添加/选择/删除/取消选择正确的选项.

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 :)

这篇关于jQuery-使用替换div选择/取消选择多选选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！