2

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

<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 标签后删除列表项和选择选项。

4

1 回答 1

1

我以前没有使用过 selectList，但是快速浏览和一些快速的 jsfiddle 工作（我借用了一个 selectList 示例）使它看起来像向 selectList 类添加委托事件处理程序ul应该能够处理它。

一个警告：最简单的选择方法是将 .delete 跨度放在适当的li. 就我个人而言，我认为它也是最接近语义正确的，因为删除“属于”那个特定li的 . 有几种不同的方法可以处理删除在外部的方法，li并且应该不难弄清楚，但这对我来说更快地达到工作演示：

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(value)函数，然后删除元素并在列表中取消选择它，您只需要返回到您的 selectList 元素并使用要删除的项目的值调用该删除函数， selectList 通过数据存储() 作为值。

我也删除了你的insertAfter，因为它似乎完全没有必要。请注意函数中对“附加”的更改onAdd。如果您的 .delete 跨度必须位于以下而不是包含的元素中，则您将需要使用同级选择器或在创建跨度时将数据附加到跨度，或使用一些类似的方法。

注意：如果您正在动态创建选择列表，则需要将 附加.on到包含它们的东西上，并且可能将选择器更改为'.selectlist-item .delete'使其保持特定。

于 2012-12-14T19:46:44.087 回答