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画像として追加できます。ただし、スパンタグをクリックした後、リストアイテムを削除してオプションを選択する方法がわかりません。

4

1 に答える 1

1

以前にselectListを使用したことはありませんが、一目見ただけでjsfiddleの簡単な作業（selectListの例の1つを借りました）により、クラス分けされた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 に答える