javascript - 是否可以从刚刚从列表中删除的项目中获取选择列表的名称

Question

从选择列表中删除项目后，我尝试更新数组中的值。为此，我需要列表的 attr('name') 。在发生 item_remove 事件时，$item 可以获取选择列表，但找不到我需要的 attr('name') .

下面的解决方案是我如何为 item_add 事件执行此操作。您将看到 var thisSelect 获取选择列表，从中我可以使用实际列表值填充值数组。

/**
 * Add callback behaviour once a select element has been selected.
 */
    $('[data-type="select"]').each(function(i, v) {
        v.selectize.on('item_add', function (value, $item) {
            var thisSelect = $item.parents('.controls').find('select'),
                name = thisSelect.attr('name'),
                values = [],
                exclusiveSelected = thisSelect.find('option[data-exclusive="true"]:selected');

            if (exclusiveSelected.length) {
                values.push({
                    "value": exclusiveSelected.val(),
                    "label": exclusiveSelected.text().trim(),
                    "label-key": exclusiveSelected.attr("label-key")
                });

                thisSelect.val(exclusiveSelected.val()).trigger('change');

            } else {
                thisSelect.siblings('.selectize-control').find('.item').each(function(i, v) {
                    values.push({
                        "value": $(v).data('value'),
                        "label": $(v).text().trim(),
                        "label-key": $(v).attr("label-key")
                    });
                });
            }

            setMultipleFieldValues(name, values);
            validate(documentId, name, fields);
        });
    });

下面是我当前针对 item_remove 事件的解决方案。控制台中出现 Cannot set property 'values' of undefined 错误，因为由于返回的列表名称未定义而无法填充值数组。

/**
 * Add callback behaviour once a select element has been unselected.
 */
    $('[data-type="select"]').each(function(i, v) {
        v.selectize.on('item_remove', function (value, $item) {
            var thisSelect = $item.parents('.controls').find('select'),
                name = thisSelect.attr('name'),
                values = [];

            thisSelect.siblings('.selectize-control').find('.item').each(function(i, v) {
                values.push({
                    "value": $(v).data('value'),
                    "label": $(v).text().trim(),
                    "label-key": $(v).attr("label-key")
                });
            });

            setMultipleFieldValues(name, values);
            validate(documentId, name, fields);
        });
    });

附件是我试图从中获取名称“additionalWork”的选择元素

Answer 1

您需要在删除对象时获取该对象。我建议将函数解析为 onDelete 回调

演示 http://jsfiddle.net/uZmcD/91/

$(function() {
  $('#select-name').selectize({
    plugins: ['remove_button'],
    onDelete: function(values) {
      item_remove_function($(this));
    }
  });
});

function item_remove_function($this) {

  var name = $this[0].$wrapper.siblings('select').attr('name');
  alert('select name = ' + name);

}