Question

我想删除单击列表项上任意位置的默认功能，以便将其删除。相反，我想添加一个删除列表项的自定义删除按钮。这是我到目前为止所做的。

<pre>
var sl = $('select#api_product').selectList({
  instance: true,
  clickRemove: false,
  onAdd: function (select, value, text) {
    $('.selectlist-item').last().after('<span class="delete"></span>');
  }
});
$('<span class="delete"></span>').insertAfter('.selectlist-item').last();
</pre>

使用此代码，我可以删除列表项上的点击目标，并添加具有删除图标作为bg图像的span标记。但是，我不知道如何在单击span标记后删除list-item并选择选项。

Answer 1

之前我没有使用过selectList，但是快速浏览了一下并且快速jsfiddle work（我借用了一个selectList示例）使它看起来像是将一个委托的事件处理程序添加到selectList分类{{1应该能够照顾它。

一个警告：选择此选项的最简单方法是将.delete范围放在适当的ul内。我个人认为它也是最接近语义正确的，因为删除“属于”特定的li。有几种不同的方法可以处理删除不在li之内的方法，而且不应该非常难以弄清楚，但这对我来说更快到达工作演示：

li

基本上selectList有一个特定的var sl = $('select#simple-usage-select-1').selectList({ instance: true, clickRemove: false, onAdd: function (select, value, text) { $('.selectlist-item').last().append('<span class="delete"></span>'); } }); $('.selectlist-list').on('click', '.delete', function(event) { sl.remove($(this).parent().data('value')); });函数，然后删除元素并在列表中取消选择它，你只需要回到你的selectList元素并使用项目的值调用remove函数被删除，selectList通过data（）作为值存储。

我也删除了您的remove(value)，因为它似乎完全没必要。请注意insertAfter函数中对'append'的更改。如果.delete span必须在以下而不是包含的元素中，您将需要使用同级选择器或在创建时将数据附加到span，或使用类似的方法。

注意：如果您动态创建选择列表，则需要将onAdd附加到包含它们的内容，并可能将选择器更改为.on以使其保持特定。

如何向jQuery selectList插件添加删除按钮

1 个答案: