2017-07-06 89 views
0

我试图在从选择列表中删除项目后更新数组中的值。为此,我需要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”从

html

回答

0

感谢您的回复,我管理的解决方案,拿出参与获得$输入,而不是$项目。为此,我可以得到列表中的值。

/** 
* 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); 
     }); 
    }); 
2

选择元素你需要把它删除,以获取对象。我建议解析函数到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); 

}