Question

我正在进行一个模式多选替换，它取一个<select>元素并替换它，而它是<option> s和div。我是一个jQuery新手，现在我已经达到了一个目的，我的替换工作完美，但功能上有一些打嗝。

所需的功能如下：

点击“选择您的选项”，即可创建模态对话框包含已使用填充的div.option列表来自每个.text()的{{1}}。
当您从模态中选择一个选项时，它会应用一个类 <option> .selected选择相应的div.option 并将该选项的<option>附加到.text()内的<li> 在模态之外。
当您点击其中一个新生成的<ul>时，<li> 它本身应该<li>和.fadeOut(); 相应的.remove();未选中。
如果您在此之后点击“选择您的选项”，您应该可以选择/取消选择<option>并在<option>中相应地反映出来}。

截至目前，除步骤4外，一切都是正确的。

我在此处添加了我的代码：jsfiddle.net/zumwalt/HB7HJ/。

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

非常感谢任何帮助！

Answer 1

你的js中有几个问题。我更新了你的小提琴，检查出来：http://jsfiddle.net/HB7HJ/13/

我做的第一件事就是删除这两行：

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

他们在调用模态时删除了所选项目。我相信我们不希望这样：P

然后我检查了您的选项是否被选中，如果没有，则添加选项，如果没有，则删除它：

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（）函数内部，没有多大意义）：

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

我现在正在对你的代码进行第二次查看，我认为它可能会有所改进，如果我找到了什么，我会更新它。无论如何，对于新手来说还不错：D

第二次看后编辑：P

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

我重构了代码，使imho更容易理解。正如开膛手杰克所说，让我们按部分去做：

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

我认为就是这样。我确信这个代码可以大大改进，但我试图尊重你的代码，因此它更容易理解，我相信它可以作为一个工作基础。如果您还有其他问题，请与我们联系：）

Answer 2

我认为问题在于您要添加以下标记：

<ul class="multiselect-dropdown-options multiselect-dropdown-options"></ul>
<div class="multiselect-dropdown">Choose your options</div>

使用jQuery。我看到你在UL的最后一堂课中加入了-'+name+'，但我看不出这样做的理由。

我继续将你的jQuery拉出来并输入你的HTML，现在页面似乎工作正常。

您可以在此处看到它：http://jsfiddle.net/HB7HJ/12/

看看你的jQuery，看起来你正在通过代码添加相当多的HTML。有什么理由说它不能只是静止的吗？

希望这可以解决您的问题！

jQuery - 使用替换div选择/取消选择多选选项

2 个答案: