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

时间:2017-07-06 10:16:21

标签: javascript jquery attr selectize.js

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

以下解决方案是我为item_add事件执行此操作的方式。您将看到var thisSelect获取选择列表,然后我可以使用实际列表值填充values数组。

/**
 * 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错误,因为由于返回为未定义的列表名称而无法填充values数组。

/**
 * 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”的select元素

html

2 个答案:

答案 0 :(得分: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);

}

答案 1 :(得分:0)

感谢您的回复,我设法提出的解决方案涉及获取$ input而不是$ item。为此,我可以获取列表中的值。

/**
 * 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 = this.$input,
                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);
        });
    });