Question

我正在使用此selectList插件http://odyniec.net/projects/selectlist/

问题在于，对于用户添加的每个元素，我希望允许他们指定数量。我可以用模板做到这一点：

   $(document).ready(function () {
      $('#mySelect').selectList({
      clickRemove: false,
     template: '<li><a>%text%<a/> - <input id="cnt_%value%" name="cnt%value%" type="text" value="1" /></li>'
      });
   });

我需要将clickRemove设置为false，否则单击文本框将删除该元素。但是，使用clickRemove：false，我无法找到允许用户删除元素的方法。

我已经尝试过来自@Esailija的建议，这可以删除所有项目：

  $("ul.selectlist-list").on("click", "a", function () {
     var selectList = $('#mySelect').selectList({ instance: true });
     selectList.remove();
  });

我可以传递一个硬编码的ID来删除（）并且它可以工作，但我似乎无法找到与我想要删除的元素相关联的值。 input元素的值是数量，而不是所选项目的ID。

那么如何获取要删除的所选项目的值？

~~我试图在模板中添加一个删除：~~

~~template: '<li><a href="#" onclick="$(this).parent().remove()">%text%<a/> - <input id="cnt_%value%" name="cnt%value%" type="text" value="1" /></li>'~~

~~从显示中删除该项目，但不允许重新选择该项目。有没有办法做到这一点，或另一个允许这种功能的插件？~~

Answer 1

试试这个（没有内联处理程序）

$( "ul.selectlist-list" ).on( "click", "a", function(){
    var $this = $(this),
        $input = $this.siblings("input"),
        selectList = $this.closest( ".selectlist-list" ).prev("select").selectList({instance: true});

    selectList.remove( $input.val() );
});

即使它不起作用（取决于你的HTML结构），你也会明白。您需要调用remove的{{1}}方法，而不是直接删除元素，因为插件根本不知道您是这样做的。

http://odyniec.net/projects/selectlist/usage.html#api-methods

Answer 2

检查库的源代码，有一个删除元素的解决方案：

 $list.children().each(function () {
            if ($(this).data('value') == value || typeof value == 'undefined')
                remove($(this));
        });

自定义jquery selectList插件以允许文本框并删除？

2 个答案: